角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：遍历多个输入字段

回答

相关问题