当我单击按钮时,我有两个(或更多)输入字段。目前,当我开始在任何字段中输入内容时,它也会使用该 ngModel 填充其他字段。
我需要的是为它自己制作每一行,这样当我单击其他按钮时,它将获取所有输入值并将它们逐行推送到数组中,因此 json 应该看起来像这样:
[{"name":"aaa", "data":"111"},{"name":"bbb", "data":"222"},{"name":"ccc", "data":"333"}]
Plunker 在这里:plunker
我认为您需要的是以下内容。
@Component({
selector: 'my-app',
template: `
<div *ngFor="let prop of properties; let i=index">
<input type="text" placeholder="name" [(ngModel)]="prop.name"/>
<input type="text" placeholder="data" [(ngModel)]="prop.data"/>
</div>
<button (click)="createRow()">Add row inputs</button>
<button (click)="addRow()">show array input rows</button>
`,
})
export class App {
// property = { name:"", data: "" };
properties = [];
createRow(){
this.properties.push({ name:"", data: "" });
}
addRow() {
console.log(this.properties);
}
}
笨蛋里面没有很多东西,所以我不知道你打算用这个去哪里。
let i=index
在 let 的部分之后添加,*ngFor
可以获得数组中当前项目的索引。你可以使用它[(ngModel)]
来告诉 Angular 从一行到下一行要绑定什么。