小编BYU*_*JIN的帖子

Angular - 如何通过单向绑定在 ngFor 循环中获取输入值

你能给我一种通过单向绑定在 ngFor 循环中获取输入值的方法吗?

<div *ngFor="let d of dataList">
  <input #inputValue type="text" [ngValue]="d.value">
  <button *ngIf="!d.open" (click)="d.open = true">change</button>
  <button *ngIf="d.open" (click)="save(d.id, NEWVALUE); d.open = false;">save</button>
  <button *ngIf="d.open" (click)="d.open = false">cancel</button>
</div>`
Run Code Online (Sandbox Code Playgroud)

如何设置 NEWVALUE?双向绑定很容易。但点击取消后,值已经改变,因为我不想要。所以会避免这种方式。

我发现的一种解决方案是使用(ngModelChange)。

<div *ngFor="let d of dataList">
  <input #inputValue type="text" [ngValue]="d.value" (ngModelChange)="dataChanged($event)">
  <button *ngIf="!d.open" (click)="d.open = true">change</button>
  <button *ngIf="d.open" (click)="save(d.id); d.open = false;">save</button>
  <button *ngIf="d.open" (click)="d.open = false">cancel</button>
</div>


private newVal;
dataChanged(val) {
  this.newVal = val;
}
save(id) {
  saveDb(id, this.newVal);
}
Run Code Online (Sandbox Code Playgroud)

正如我猜测的那样,这不是清晰且优化的代码。

据我所知,使用 # 进行模板绑定也不适用于 ngFor。喜欢

<div *ngFor="let …
Run Code Online (Sandbox Code Playgroud)

binding oneway ngfor angular

1
推荐指数
1
解决办法
2万
查看次数

标签 统计

angular ×1

binding ×1

ngfor ×1

oneway ×1