Получение значений из выбранных элементов в * ngFor

Допустим, у меня есть этот шаблон:

<div *ngFor="let div of divs">
  <select #ref (change)="print(ref)">
    <option *ngFor = "let opt of options">{{opt}}</option>
  </select>
</div>

и этот компонент:

export class AppComponent {
  divs = ["1", "2", "3"];
  options = ["opt1", "opt2", "opt3"];

  print(value){
    console.log(value.value);
  };
}

Теперь я могу получать значение каждого отдельного элемента select всякий раз, когда выбирается новая опция. Однако с помощью этого метода я создаю template reference variable для выбора (#ref) в цикле *ngFor, что означает, что у меня будет 3 выбора с той же ссылкой в ​​конце цикла. На сайте angular.io сказано следующее:

«Не определяйте одно и то же имя переменной более одного раза в одном шаблоне. Значение времени выполнения будет непредсказуемым».

Поэтому я считаю, что использовать этот метод - плохая идея. У меня вопрос, есть ли другой способ сделать это?


angular ngfor
person Jesper    schedule 15.11.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не думаю, что нужна локальная переменная только для получения выбранных значений:

Просто используйте (change)="print($event.target.value)" и [value]='opt'

<div *ngFor="let div of divs">
  <select (change)="print(div ,$event.target.value)">
    <option *ngFor = "let opt of options" [value]='opt'>{{opt}}</option>
  </select>
</div>

print(value_of , value) {
   console.log('value of' , value_of , 'is' , value );
}
person Vivek Doshi    schedule 15.11.2017
comment
Да, это то, что я искал. Я совершенно забыл о $event object. Спасибо! - person Jesper; 15.11.2017
comment
@Jesper, рад вот что :) - person Vivek Doshi; 15.11.2017