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 从一行到下一行绑定什么。

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

ngFor generated input fields get different values - Angular 2

binding

input

ngmodel

angular