Question

我们说我有这个模板：

<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);
  };
}

现在，只要选择了新选项，我就可以获得每个选择元素的值。但是，通过这种方法，我在template reference variable循环中的select（#ref）上创建*ngFor，这意味着我将在结尾处使用相同的引用进行3次选择循环。它在angular.io网站上说了以下内容：

＆＃34;不要在同一模板中多次定义相同的变量名称。运行时值将是不可预测的。＆＃34;

因此，我认为使用这种方法是个坏主意。我的问题是，是否有另一种方法可以做到这一点？

Answer 1

我不认为，只需获取选定的值就需要本地变量：

只需使用(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 );
}

Answer 2

您可以创建动态id，然后打印

试试这个

<div *ngFor="let div of divs let i="index"">
  <select [id]="i" (change)="print(i,div)">
    <option *ngFor = "let opt of options">{{opt}}</option>
  </select>
</div>

在组件

中

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

从* ngFor

2 个答案: