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

其中没有很多东西，所以我不知道你打算去哪里。

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

ng为生成的输入字段获取不同的值 - Angular 2

1 个答案: