如何在 Angular 中获取选择之外的所选选项的索引？

Question

我有一个简单的<select>Angular（带材质）如下：

<mat-form-field>
  <mat-label>Type</mat-label>
  <mat-select placeholder="Type" formControlName="type" name="type" id="name">
    <mat-option>None</mat-option>
    <mat-option *ngFor="let t of types" [value]="t">
      {{t}} <-- it is enum -->
    </mat-option>
  </mat-select>
</mat-form-field>

我想在代码的其他部分使用所选类型的索引。

更准确地说：在*ngFor另一个选择中。因此，我不能使用 documentById。

另外，我不想只是为了这样做而安装 jQuery。

是否可以？

Answer 1

正如这个 Angular Material Documentation 示例所建议的，您可以通过[(value)]两种方式绑定：

<mat-form-field>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option *ngFor="let t of types; let i = index" [value]="i">{{t}}</mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

selected将成为您班级的财产。

这是Angular 团队的工作 StackBlitz供您参考。