Can you give me a way to get input value at ngFor loop with one way binding?
<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>`
How can I set NEWVALUE? with two-way binding is easy. but after click cancel, value already changed as I don't want. So would avoid that way.
One solution I've found is using (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);
}
This is not clear and optimized code as I guess.
As I know, template binding with # is also not work with ngFor. like
<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>
Do you have any good solution for me?
It is not posible you must provide the template variable directly, but I did an alternative for you
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>
Component
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);
}
}