Question

我想迭代多个输入字段，这些字段的定义如下：

<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}}">

现在我想对它们进行交互，编辑它们的值并将编辑后的值返回到输入字段。

Answer 1

这是你在找什么？

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

Answer 2

尝试以下（* 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中使用ngModel指令，还需要在声明组件的模块中导入FormsModule：

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

Angular 4.0：迭代多个输入字段

2 个答案: