角4.0：遍歷多個輸入字段

我想遍歷被這樣定義多個輸入字段：角4.0：遍歷多個輸入字段

<input placeholder="Name" name="name" value="x.y"> 
<input placeholder="Description" name="description" value"x.z"> 
<!-- And more fields -->

或像這樣：

<input *ngFor="let x of y" name="{{x}}" value="{{x.y}}">

現在我想interate在它們上面，編輯它們的值並將編輯後的值返回到輸入字段。

來源

2017-09-25 Leonzen

什麼是和xy格式這裏y.z？你是否試圖迭代對象鍵來爲該對象生成輸入？ – RUKAclMortality

是的，我正在迭代對象。我正在請求一個帶有http請求的對象，並用我得到的值填充輸入字段。我想要編輯這些值並將例如放置或發佈請求發送回服務器。 – Leonzen

這是你在找什麼？

<input *ngFor="let x of y" [name]="x.name" [(ngModel)]="x.value">

來源

2017-09-25 12:39:53 ShadowFoOrm

請嘗試以下（* component.html）：

<div> 
    <input type="text" *ngFor="let key of myObjectKeys" 
    [placeholder]="key" 
    [name]="key" 
    [(ngModel)]="myObject[key]" /> 
</div> 
<div> 
    {{ diagnostic() }} 
</div>

的* component.ts類體：

myObject = { Name: '', Description: '' } 
myObjectKeys = Object.keys(this.myObject) 

diagnostic() { 
    return JSON.stringify(this.myObject) 
}

...你也可以使用一個管道獲得對象密鑰：

https://stackoverflow.com/a/35536052/2644437

*注：使用在角4，你還需要FormsModule到模塊中輸入您的組件聲明ngModel指令：

import { FormsModule } from '@angular/forms'; 
//... 
imports: [ 
    //... 
    FormsModule 
    ]

來源

2017-09-25 13:18:11 RUKAclMortality

角4.0：遍歷多個輸入字段

回答

相關問題