【问题标题】:mat-icon in multiple mat-select多个 mat-select 中的 mat-icon
【发布时间】:2020-03-03 14:54:47
【问题描述】:

如何修复 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>

【问题讨论】:

  • 您想将 mat-icon 与选定的值一起显示?

标签: angular angular-material


【解决方案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>

【讨论】:

  • 这很有帮助,只是将替换和括号添加到 (isLast ? '' : ', ') &lt;mat-select-trigger *ngIf="card.documentCategory"&gt; &lt;span *ngFor="let category of card.documentCategory; last as isLast"&gt; {{category.replace('delete','') + (isLast ? '' : ', ')}} &lt;/span&gt; &lt;/mat-select-trigger&gt;
猜你喜欢
  • 2019-08-02
  • 1970-01-01
  • 1970-01-01
  • 2018-03-21
  • 2018-08-07
  • 2020-11-13
  • 2021-04-22
  • 1970-01-01
  • 2019-01-28
相关资源
最近更新 更多