你能不能给我一个办法，在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>`
如何设置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);
}
我想这是不明确和优化的代码。
据我所知，模板，结合＃也不会ngFor工作。 喜欢
<div *ngFor="let d of dataList">
<input #inputValue_{{d.id}} type="text" [ngValue]="d.value">
<button *ngIf="d.open" (click)="save(inputValue_{{d.id}}.value); d.open = false;">save</button>
</div>
你对我有什么好的解决办法吗？
它不是更多钞票你必须直接提供的模板变量，但我做了一个另类的你
HTML
<div *ngFor="let item of array">
<input id="id_{{item.id}}" />
<button type="button" (click)="printValue('id_'+item.id)"> buton {{item.id}} </button>
</div>
零件
export class AppComponent {
array = [{id: 1}, {id: 2},{id: 3}]
printValue(value: any){
console.log(value);
var containputiner = document.querySelector("#"+value);
console.log(containputiner.value);
}
}
Stackblitz演示
您可以复制的数组，并使用从原来的阵列中的数据来设置之前的值，好像它是在内存中。
见我的代码示例： https://stackblitz.com/edit/angular-a4eucy
您可以创建一个新的组件，将从列表代表一个项目。
应用项目，list.ts
import { Component, Input, Ouput, EventEmitter } from '@angular/core';
@Component({
selector: 'app-item-list'
templateUrl: './app-item-list.html'
})
export class ItemListComponent {
newValue: string;
@Input() data: YourDataClassType;
@Output() onUpdate: EventEmitter<{id: number, newValue: string}>;
contructor() {
this.onUpdate = new EventEmitter<{id: number, newValue: string}>;
this.newValue = data.value;
}
save() {
this.onUpdate.emit({id: this.data.id, newValue: this.newValue});
}
}
应用项目，list.html
<div>
<input type="text" [(ngValue)]="newValue">
<button *ngIf="!data.open" (click)="data.open = true">change</button>
<button *ngIf="data.open" (click)="save(); d.open = false;">save</button>
<button *ngIf="data.open" (click)="data.open = false">cancel</button>
</div>
家长component.html
<app-item-list *ngFor="let d of datalist" [data]="d" (onUpdate)="save($event)" />
家长component.ts
save($event) {
console.log($event.id, $event.newValue);
}
请注意，在您的模块声明“应用项目清单”。
该代码可能需要一些重构。 我做到了未经测试，我没一会儿采用了棱角分明。
