如何在mat-option下制作2个div，以便在Angular 16的mat-autocomplete中左右对齐

Question

我使用 Angular 材质 mat-autocomplete 在下拉菜单中列出所有搜索建议，每个 mat-option 下有两个 div，第一个 div 突出显示值必须左对齐，第二个 div nr-info 必须左对齐，如：

我已经尝试过：

    <form class="search-box-container">
      <!-- Search button -->   
      <button mat-button class="search-button" (click)="loadSuggestionsFromEndpoint2()">
        <mat-icon>search</mat-icon>
      </button>

      <mat-form-field class="autocomplete-container">
        <input
          type="text"
          matInput
          [matAutocomplete]="auto"
          [formControl]="searchControl"
          #searchBox
          id="search-box"
          placeholder="YuSearch"
          (keydown.enter)="closeAutocompleteOnEnter()"/>
      </mat-form-field>

      <!-- Reset button -->
      <button mat-button class="reset-button" (click)="resetSearchBar()">
        <mat-icon>close</mat-icon>
      </button>
  
    <mat-autocomplete #auto="matAutocomplete" [panelWidth]="632"   class="dropdown-panel"
      (optionSelected)="showDetails($event.option.value)">
      <ng-container *ngFor="let suggestion of searchSuggestionsFromEndpoint1">
        <mat-option [value]="suggestion" *ngIf="suggestion.highlight">
          <ng-container *ngFor="let prop of getObjectKeys(suggestion.highlight)">
            <div class="suggestion-container">
              <div class="row">
                <div class="highlighted-value">
                  <span [innerHTML]="getHighlightedValue(suggestion.highlight[prop]) | highlight: searchControl.value"></span>
                </div>
                <div class="nr-info">
                  NR. {{ suggestion._source.Nr }}
                </div>
              </div>
            </div>
          </ng-container>
        </mat-option>        
      </ng-container>
  
      <!-- Display the "View All" button if displayViewAllButton is true -->
      <!-- Center the "View all" button -->
      <div class="view-all-container" *ngIf="showViewAllButton">
        <button mat-button class="view-all-button"
          (click)="loadAllSearchSuggestionsFromEndpoint1(); $event.stopPropagation();">
          Zeige alle {{ allSearchSuggestionsFromEndpoint1.length }} Treffer an
        </button>
      </div>
    </mat-autocomplete>
  </form>

.search-box-container {
  border: 2px solid #ccc;
  border-radius: 25px;
  overflow: hidden;

  height: 48px;
  width: 632px;
  background-color:#F2F2F2;

  // position: absolute;
  position: relative;
  top: 17px; /* Adjust the top position as needed */
  bottom: 17px; /* Adjust the bottom position as needed */
  left: 391px; /* Adjust the left position as needed */
  right: 389px; /* Adjust the right position as needed */

  // background-color:#F2F2F2;

  display: flex; /* Use flexbox to arrange the buttons */
  align-items: center; /* Vertically center the buttons */
  justify-content: center; /* Horizontally center the buttons and input */

  input::placeholder {
    color: #343F4D; /* Change the color to grey scale/urban grey (#343F4D) */
    font-size: 14px; /* Change the font size */
    font-family: "Skolar Sans PE Regular", sans-serif; /* Change the font family to Skolar Sans PE Regular */
  }
  
  .search-button {
    height: 16px;
    width: 16px;

    margin-right: 8px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;

    // Position the search button
    position: absolute;
    top: 42%;
    bottom: auto; /* Remove the bottom property */
    left: 18px;
    right: auto;
    transform: translateY(-50%);
  }

  .reset-button {
    height: 16px;
    width: 16px;

    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;

    // Position the reset button
    position: absolute;
    top: 42%;
    bottom: auto; /* Remove the bottom property */
    left: auto;
    right: 24px;
    transform: translateY(-50%);
  }

}

.dropdown-panel{
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 0 1px 0 rgba(48,49,51,0.05), 0 8px 16px 0 rgba(48,49,51,0.1);

  overflow-x: hidden; /* Disable horizontal scroll bar */

  margin-top: 17px;
  margin-bottom: 17px; /* Add a margin-bottom of 17px to create the distance */

  /* Adjust the position of the autocomplete panel */
  // position: absolute;
  // left:388px !important;
  // right:388px !important;
  // top: 71px !important;
  // bottom: 71px !important;
}

::ng-deep .mat-autocomplete-panel {
  position: relative;
  margin-top: 17px;
}

mat-icon {
  color: #343F4D !important; /* Set the color to aareon urban grey */
}

mat-form-field {
  width: 88%;
  input.mat-input-element {
    text-align: center;
  }
}

::ng-deep .mat-mdc-form-field-subscript-wrapper {
  display: none;
}

mat-option {
  display: flex;
  align-items: center;

  max-width: 600px; /* Adjust the value as needed */
  background-color: #FFFFFF;
  margin-top: 1px; /* Adjust this value to increase or decrease the spacing between options */
  margin-left: 16px;
  margin-right: 16px;
  border-bottom: 1px solid #ccc;
}

.suggestion-container {
  display: flex;
  justify-content: space-between; /* Align children elements at each end */
  width: 100%;
}

.highlighted-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #343F4D;
  font-family: "Skolar Sans PE", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 16px;
  text-align: left;
}

.nr-info {
  color: #848B93;
  font-family: "Skolar Sans PE", sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1.71px;
  line-height: 13px;
  text-align: right;
  flex-shrink: 0; /* Prevent nr-info from shrinking */
  margin-left: auto; /* Push nr-info to the right */
}

/* Add styles to center the "View all" button content */
.view-all-container {
  position: sticky;
  top: 100%; /* Place the button at the bottom of its container */
  z-index: 1; /* Ensure it's on top of other content */
  background-color: #FFFFFF; /* Match your background color */
  padding: 10px; /* Add some padding for spacing */

  /* Additional styling */
  border-top: 1px solid #ccc;

  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 100%;
  margin-top: 13px; /* Add margin for spacing */
}

/* Center the text within the button */
.view-all-button {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center; /* Center content horizontally */
  width: 35%; /* Set the button width to match the search box */
  height: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: background .3s;
  padding: 0 16px;
  color: #0237FF;
  font-family: "Skolar Sans PE Bold", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 16px;
  margin-top: 13px;
  margin-bottom: 13px;

  border: none;
  background-color: transparent;
}

但是，现在看起来：

任何及时的帮助将不胜感激！

Answer 1

我认为这会起作用

<div class="suggestion-container">
                <div class="highlighted-value">
                  <span [innerHTML]="getHighlightedValue(suggestion.highlight[prop]) | highlight: searchControl.value"></span>
                </div>
                <div class="nr-info">
                  NR. {{ suggestion._source.Nr }}
                </div>
</div>

.suggestion-container {
  display: flex;
  justify-content: space-between; /* Align children elements at each end */
  width: 100%;
}

remove row div from suggestion-container child and check it because you haven't define row css