无法使用angular 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>

@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

问题是您在 ngFor 循环。 这会产生如下结果:

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

因此,参考 #ds 在你的大脑之外是不明显的 ngFor公司 循环。如果将按钮放在div中(这样每行都有一个按钮),它将工作。

使用@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 .
}