如何在角度 5 中隐藏所选选项标签中的某些字符？

Question

我在这样的 angular 5 框架中使用 angular material select。

<mat-form-field>
   <mat-select (change)="viewdropdownchange($event.target.value)" [(ngModel)]='this.current_view_id'>

<mat-option *ngFor="let viewname of secondMenu;" value={{viewname.id}}>  
 <span>{{viewname.value}}</span>
  <mat-chip-list style="float: right;margin-top: 7px">
  <mat-chip style="background-color: #3f51b5;color: #fff;">Edit </mat-chip>
  <mat-chip  style=" background-color: #ff4081;color: #fff;">Clone</mat-chip>
  <mat-chip     style="background-color: #f44336;color: #fff;">Delete</mat-chip>
</mat-chip-list>


</mat-option>

   </mat-select>

</mat-form-field> 

但所选选项的标签包含芯片标题，如编辑、克隆删除等。我想在选择框中显示为选定选项时删除它们。

如何删除剩余的编辑、删除、克隆？

Answer 1

可以在mat-select中添加一个引用变量->#select，如果面板没有打开*ngIf="select.panelOpen"则隐藏mat-chip-list

<mat-select placeholder="Favorite food" #select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
        {{ food.viewValue }}
        <mat-chip-list style="float: right;margin-top: 7px" *ngIf="select.panelOpen">
            <mat-chip style="background-color: #3f51b5;color: #fff;">Edit </mat-chip>
            <mat-chip style=" background-color: #ff4081;color: #fff;">Clone</mat-chip>
            <mat-chip style="background-color: #f44336;color: #fff;">Delete</mat-chip>
        </mat-chip-list>
    </mat-option>
</mat-select>

更新 更好的解决方案是使用MatSelectTrigger

<mat-form-field>
<mat-select placeholder="Favorite food" [formControl]="foodSelect">
    <mat-select-trigger>
        {{ foodSelect.value }}
    </mat-select-trigger>
    <mat-option *ngFor="let food of foods" [value]="food">
        {{ food }}
        <mat-chip-list style="float: right;margin-top: 7px">
            <mat-chip style="background-color: #3f51b5;color: #fff;">Edit </mat-chip>
            <mat-chip style=" background-color: #ff4081;color: #fff;">Clone</mat-chip>
            <mat-chip style="background-color: #f44336;color: #fff;">Delete</mat-chip>
        </mat-chip-list>
    </mat-option>
</mat-select>

以及组件代码。

foodSelect = new FormControl();
foods = ['Steak', 'Pizza', 'Tacos'];

这是一个更新的示例https://stackblitz.com/edit/angular-xip1me