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

Question

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

我在 mat-select-trigger 上尝试了 *ngFor，就像在 mat-options 中一样，但它不起作用。

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

标识符'item'未定义。组件声明、模板变量声明和元素引用不包含这样的

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>

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