Question

我在Angular中有一个简单的<select>（带有Material），如下所示：

<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

您可以简单地设置 [(ngModel)] 变量，然后使用该变量获取索引

<mat-select placeholder="Type" [(ngModel)]="selected" 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>

，然后在组件中，使用

this.index = this.types.findIndex(item => item === selected);

Answer 2

根据this Angular Material Documentation example的建议，您可以通过两种方式绑定到 [(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团队的Working StackBlitz，供您参考。

Answer 3

根据Sajeetharans的答案，不建议同时使用ngModel和反应形式，也不建议使用。而是要注意表单控件的更改，并找到索引并将其存储在变量中以备后用。这是一个示例：

myForm: FormGroup;

idx: number;
foods = ['Steak', 'pizza-1'];

constructor(private fb: FormBuilder) { }

ngOnInit() {
  this.myForm = this.fb.group({
    mySelect: ['']
  });

  this.myForm.get('mySelect').valueChanges.subscribe((value) => {
    this.idx = this.foods.findIndex(val => val === value);
    console.log(this.idx)
  });
}

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

3 个答案: