коврик-иконка в нескольких ковриках

Question

как исправить проблему с mat-icon в mat-select (множественном), после добавления mat-icon и выбора опции mat-icon value, также отображаемой в выбранных значениях, см. Прикрепленное изображение 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, чтобы настроить то, что вы показываете в тексте триггера выбора циновки. Для получения дополнительной информации отметьте Angular Материал: Пользовательский текст триггера

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