Как получить индекс выбранного параметра за пределами выбора в 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

В соответствии с этим примером документации углового материала , вы можете связать с [(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 будет принадлежать вашему классу.

Вот вам Working StackBlitz от Angular Team для справки.

Answer 2

За ответ 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)
  });
}

Answer 3

Вы можете просто установить переменную [(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);