Question

我在角度5框架中使用角度材质选择。

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

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

＆LT;选择选项，编辑，删除，克隆＆gt;

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

Answer 1

您可以将参考变量添加到mat-select - ＆gt; #select，如果面板未打开mat-chip-list

，则隐藏*ngIf="select.panelOpen"

<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

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

1 个答案: