angular - 无法使用 angular 2+ 获取模板引用值

Question

在这里，我尝试在单击按钮时通过模板引用变量发送数据，但出现错误 Cannot read property 'value' of undefined。

PFB 我的代码:

.ts代码

sample = "Angular";

data = [
  { id: 1, name: "Mr. Nice" },
  { id: 2, name: "Narco" },
  { id: 3, name: "Bombasto" },
  { id: 4, name: "Celeritas" },
  { id: 5, name: "Magneta" },
  { id: 6, name: "RubberMan" },
  { id: 7, name: "Dynama" },
  { id: 8, name: "Dr IQ" },
  { id: 9, name: "Magma" },
  { id: 10, name: "Tornado" }
];

check(ds) {
  console.log(ds.value);
}

.html代码

<div *ngFor="let x of data">
   <input type="text" id={{x.id}} name={{x.name}} [(ngModel)]="sample" #ds="ngModel">
</div>

<button type="button" (click)="check(ds)">Check</button>

Answer 1

问题是您在 ngFor 循环中使用了模板变量。这会产生如下内容:

<div>
 <input #ds>
 <input #ds>
 <input #ds>
 ...
</div>

因此，#ds 的引用在您的 ngFor 循环之外是不明显的。如果将按钮放在 div 中(这样每一行都有一个按钮)，它就会起作用。