代码之家 › 专栏 › 技术社区 › Madpop

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

typescript angular

1

Madpop · 技术社区 · 6 年前

在这里,我试图发送数据通过模板引用变量的按钮点击,但我得到的错误 Cannot read property 'value' of undefined

PFB我的代码:

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>

3 回复 | 直到 6 年前

1

Sivakumar Tadisetti zeah 6 年前

你可以像下面这样尝试,但这更复杂

<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

2

4

Kim Kern 6 年前

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

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

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

3

1

CruelEngine 6 年前

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