多个 mat-select 中的 mat-icon

Question

如何修复 mat-select(multiple) 中 mat-icon 的问题，在添加 mat-icon 并选择选项 mat-icon 值后也显示在选定值中，请参阅附加图片 mat-select-list

selecte items list

<mat-form-field class="p-8 w-100-p" fxFlex>
          <mat-select multiple
            [(ngModel)]="documentCategory">
            <mat-option [value]="item" *ngFor="let item of documentTagsList">
              {{item}}
              <span fxFlex = '1 0 auto'></span>
              <mat-icon class="mat-24 mt-12 float-right"  (click)='deleteDocumentTag(item)'>delete</mat-icon>
            </mat-option>
          </mat-select>
</mat-form-field>

Answer 1

您可以使用 mat-select-trigger 自定义您在 mat-select 触发器文本中显示的内容。更多信息，请查看Angular Material: Custom Trigger Text

<mat-form-field class="p-8 w-100-p" fxFlex>    
  <mat-select multiple [(ngModel)]="documentCategory">
      <mat-select-trigger *ngIf="documentCategory">
         <span *ngFor="let category of documentCategory; last as isLast">
           {{category + isLast ? '' : ', '}}
         </span>
      </mat-select-trigger>
      <mat-option [value]="item" *ngFor="let item of documentTagsList">
         {{item}}
         <span fxFlex = '1 0 auto'></span>
         <mat-icon class="mat-24 mt-12 float-right"  (click)='deleteDocumentTag(item)'>delete</mat-icon>
      </mat-option>
  </mat-select>
</mat-form-field>