多个垫子选择中的垫子图标

Question

如何解决 mat-select(multiple) 中 mat-icon 的问题，在添加 mat-icon 并选择选项 mat-icon 值也显示在所选值中后，请参阅附加图像mat-select-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：自定义触发器文本

<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>