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内（以便每一行都有一个按钮），它将起作用。

Answer 2

您可以尝试以下操作，但这更加复杂

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

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

TS文件

@ViewChildren('ds') inps: QueryList<ElementRef>;

check() {
    console.log(this.inps);
    for (var x in this.inps) {
      if (x == "_results") {
        for (var i = 0; i < this.inps[x].length; i++) {
          console.log(this.inps[x][i].nativeElement.value)
        }
      }
    }
}

使用一些代码行，您可以实现所需的目标

if (!this.inps[x][i].nativeElement.value) {
  this.inps[x][i].nativeElement.style.borderColor = "red";
}

还更新了堆叠闪电战，请检查

更新代码

check() {
  let checkids = [2, 3, 6];
  for (var x in this.inps) {
    if (x == "_results") {
      let id;
      for (var i = 0; i < this.inps[x].length; i++) {
        id = this.inps[x][i].nativeElement.getAttribute('id');
        if ((checkids.indexOf(+id) != -1) && !this.inps[x][i].nativeElement.value) {
          this.inps[x][i].nativeElement.style.borderColor = "red";
        }

      }
    }
  }
}

工作Stackblitz

Answer 3

使用@Javascript Lover-SKT的答案作为参考，您的问题将使用以下解决方案解决：

<div *ngFor="let x of data; let i = index;">
    <input type="text" id={{x.id}} name={{x.name}} [ngModel]="sample" (ngModelChange)='test($event,i)' #ds>
</div>

您的ts中：

test(event , index){
 console.log(index + "-" + event) ; 
//here you'll get both the value and the index of data that is changed .
}

希望这可以简化您的解决方案

无法使用角度2+获取Templaet参考值

3 个答案: