Question

mat-option具有*ngFor，并且我在其中显示{{some text}}和一个图标，因此，在选择任何一个选项时，{{some text}}和图标文本都会显示在{ {1}}。例如：如果我有文字mat-form-field和信息图标。选择此选项后，我希望它仅显示"bbnh" image_for_the_above

我在"bbnh"上尝试了*ngFor，就像在mat-options中一样，但是没有用。

mat-select-trigger

标识符<mat-form-field> <mat-select placeholder="Select offer" formControlName="promo"> <mat-select-trigger> {{ item.promo_code }} //Error occuring in this line </mat-select-trigger> <mat-option *ngFor="let item of promotions" [value]="item" >{{ item.promo_code }} <i class="material-icons"> info </i> </mat-option> </mat-select> </mat-form-field>未定义。组件声明，模板变量声明和元素引用不包含这样的

Answer 1

据我了解，我想这就是您要寻找的东西

<mat-form-field>
  <mat-select  placeholder="Select offer" formControlName="promo" [(value)]="selected">
    <mat-select-trigger>{{selected}}</mat-select-trigger>
    <mat-option *ngFor="let item of promotions" [value]="item"
      >{{ item.promo_code }}
      <i class="material-icons">
        info
      </i>
    </mat-option>
  </mat-select>
</mat-form-field>

这应该有效！如果您遇到任何错误，请在评论中告诉我们

如何与* ngFor一起使用mat-select-trigger

1 个答案: