角度 4 - 将对象数组映射到模板驱动的 ngModel

Question

我正在用模板驱动的方法开发一个应用程序。以下是我的项目结构。

• 父母

parent.component.ts

父组件.html

• 孩子

child.component.ts

子组件.html

儿童网

儿童网：

export class child {
    public childValue: address[];
}
export class address {
    public state: string;
    public city: string;
}

child.component.ts

<div *ngFor="let item of ValueItem; let i=index">
    <label> {{item.name}}</label>
    <input name="city" [(ngModel)]="address[i].state"/>
</div>

当我尝试将地址对象的状态字符串映射到ngModel时，我无法执行此操作，并且它显示错误"无法读取未定义的属性'状态'"。是否可以将对象数组中的对象映射到ngModel？如果是这样，如何做到这一点？

Answer 1

简而言之，是的！ 可以将对象数组中的对象映射到ngModel。
您提供了此模板代码。

<div *ngFor="let item of ValueItem; let i=index">
   <label> {{item.name}}</label>
   <input name="city" [(ngModel)]="address[i].state"/>
</div>

我假设ValueItem是address[]类型，并且您已确保它包含一些数据。如果是这样，您应该能够通过以下方式访问数据：

<div *ngFor="let item of ValueItem">
   <label> {{item.city}}</label>
   <input name="city" [(ngModel)]="item.state"/>
</div>

如果我们看看正在发生的事情。*ngFor="Let item of ValueItem;允许我们遍历数组，并允许我们通过item访问对象，在这种情况下是 address 类型 .我们从前面知道address有 2 个属性 state 和 city .因此，要使用它们，我们可以简单地使用 item.state .

希望这有帮助。

Answer 2

就我而言，以下代码不起作用。

 <form #myform="ngForm">
    <table>
      <tr *ngFor="let staff of staffs">
         <td><input name="name" [(ngModel)]="staff.name">{{staff.name}}</td>
      </tr>
    </table>
   </form>

下面的代码对我有用。

<form #my2form="ngForm">
   <table>
      <tr *ngFor="let staff of staffs;let i = index">
         <td><input name="staff.{{i}}.name" [(ngModel)]="staff.name">{{staff.name}}</td>
      </tr>
    </table>
</form>