Angular - 如何通过单向绑定在 ngFor 循环中获取输入值
Angular - How to get input value at ngFor loop with one way binding
你能给我一种在 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);
}
}
您可以复制数组并使用原始数组中的数据来设置以前的值,就好像它在内存中一样。
您可以创建一个新组件来表示列表中的项目。
app-item-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});
}
}
app-item-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>
parent-component.html
<app-item-list *ngFor="let d of datalist" [data]="d" (onUpdate)="save($event)" />
parent-component.ts
save($event) {
console.log($event.id, $event.newValue);
}
记得在模块声明中包含 'app-item-list'。
此代码可能需要一些重构。我没有测试就成功了,我有一段时间没有使用 angular。
home.component.html
<div>
<ul>
<li style="border:1px solid;width:25%;margin-bottom:1%;cursor:pointer;" *ngFor="let items of statusdata" (click)="getData(items)"><span>{{items.id}}</span> <span>{{items.name}}</span></li>
</ul>
<select [(ngModel)]="getOption">
<option>2019-2020</option>
</select>
</div>
home.component.ts
import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
declare var $: any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
getIt:any;
statusdata: any;
getOption:any;
ngOnInit() {
this.statusdata = [{ id: 1, name: 'Angular 2+' },
{ id: 2, name: 'Angular 4' },
{ id: 3, name: 'Angular 5' },
{ id: 4, name: 'Angular 6' },
{ id: 5, name: 'Angular 7' }
];
console.log(this.getOption);
}
getData(items){
console.log(items.name+"and"+items.id);
}
}
你能给我一种在 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);
}
}
您可以复制数组并使用原始数组中的数据来设置以前的值,就好像它在内存中一样。
您可以创建一个新组件来表示列表中的项目。
app-item-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});
}
}
app-item-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>
parent-component.html
<app-item-list *ngFor="let d of datalist" [data]="d" (onUpdate)="save($event)" />
parent-component.ts
save($event) {
console.log($event.id, $event.newValue);
}
记得在模块声明中包含 'app-item-list'。
此代码可能需要一些重构。我没有测试就成功了,我有一段时间没有使用 angular。
home.component.html
<div>
<ul>
<li style="border:1px solid;width:25%;margin-bottom:1%;cursor:pointer;" *ngFor="let items of statusdata" (click)="getData(items)"><span>{{items.id}}</span> <span>{{items.name}}</span></li>
</ul>
<select [(ngModel)]="getOption">
<option>2019-2020</option>
</select>
</div>
home.component.ts
import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
declare var $: any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
getIt:any;
statusdata: any;
getOption:any;
ngOnInit() {
this.statusdata = [{ id: 1, name: 'Angular 2+' },
{ id: 2, name: 'Angular 4' },
{ id: 3, name: 'Angular 5' },
{ id: 4, name: 'Angular 6' },
{ id: 5, name: 'Angular 7' }
];
console.log(this.getOption);
}
getData(items){
console.log(items.name+"and"+items.id);
}
}