mat-select with mat-option using multiple attribute with search bar 正在取消選擇先前選擇的值

Question

[搜索名稱並選擇值] ( https://i.stack.imgur.com/a7qHi.png )清除搜索欄並搜索新的，之前選擇的值被刪除

我正在為下拉列表（選擇）使用角度材料，我正在使用具有multiple屬性的墊選擇並使用mat-option來顯示所有復選框。

在搜索欄中，如果我搜索名稱，它會顯示，一旦我選擇名稱並清除搜索欄並搜索新名稱，先前選擇的值將被取消選擇。

我在 mat-option 中嘗試了 mat-checkbox，結果相同，我使用 mat-checkbox 而不是 mat-option，它沒有打開下拉列表（有意義，因為它是一個復選框而不是下拉列表）。

這是我的代碼

以上2張圖片顯示了我的解釋。

.html file

<mat-form-field appearance="fill">
  <mat-label>Select Target Groups</mat-label>
    <mat-select formControlName="targetGroups" multiple [id]="'targetGroups'+i">
      <input matInput placeholder="Search for target groups" type="text" style="height: 35px;"
        (keyup)="searchText($event, 'groupSearch')" (click)="$event.stopPropagation()">
          <section>
            <ng-container *ngFor="let group of targetGroups">
              <mat-option
                *ngIf="groupSearch?.toLowerCase()?group.name?.toLowerCase())?.includes(groupSearch?.toLowerCase()): true"
                   value="{{json.stringify(group.name)}}">{{group.name}}</mat-option>
             </ng-container>
          </section>
     </mat-select>
 </mat-form-field>

編輯：

如果我嘗試在不進行搜索的情況下進行選擇，我可以選擇多個名稱

所有選擇下方的圖片

Answer 1

我使用了另一種方式，通過樣式綁定來隱藏和顯示選項。 它工作得很好。

這是代碼。

html.file

<ng-container *ngFor="let user of targetUsers">
    <mat-option [style]="{display: getSearchFn(userSearch,user.user_name)? '': 'none'}"
       value="{{json.stringify(user)}}">{{user.user_name}}-({{user.user_email}})</mat-option>
</ng-container>

根據我的要求編寫了功能。