ng對於生成的輸入字段，獲得不同的值-Angular 2

Question

單擊按鈕時，會生成兩個（或更多）輸入字段。 當前，當我開始在任何文件中鍵入內容時，它還將使用該ngModel填充其他字段。

我需要做的是自己制作每一行，這樣當我單擊其他按鈕時，它將獲取所有輸入值並將它們按行按數組推入，因此json應該如下所示：

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

朋克在這里： 朋克

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

pl子里面沒有很多東西，所以我不知道你打算去哪里。

在*ngFor的let部分之后添加let i=index可以使您獲得數組中當前項目的索引。 您可以在[(ngModel)]使用它來告訴Angular從一行到另一行綁定的內容。