ngFor 生成的输入字段获得不同的值 - Angular 2

Question

当我点击按钮时，我有两个（或更多）输入字段。目前，当我开始在任何字段中输入内容时，它也会使用该 ngModel 填充其他字段。

我需要为它自己制作每一行，这样当我点击其他按钮时，它会获取所有输入值并将它们逐行推送到数组中，因此 json 应该看起来像这样：

[{"name":"aaa", "data":"111"},{"name":"bbb", "data":"222"},{"name":"ccc", "data":"333"}]

Plunker 在这里：plunker

Answer 1

我认为您需要的是以下内容。

@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);
    }
}

plunk 里面没有很多东西，所以我不知道你打算用这个去哪里。

在*ngFor 的 let 部分之后添加let i=index 可以获得数组中当前项的索引。您可以在 [(ngModel)] 中使用它来告诉 Angular 从一行到下一行绑定什么。