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

Posted 2023-03-13

【中文标题】Angular 4 - 将对象数组映射到模板中的 ngModel 驱动

【英文标题】：Angular 4 - Mapping object array to ngModel in template driven from

【发布时间】：2018-03-22 01:17:18

【问题描述】：

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

父母

parent.component.ts

parent.component.html

孩子

child.component.ts

child.component.html

child.ts

child.ts：

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?如果是这样，如何做到这一点？

【问题讨论】：

什么是ValueItem？可能它的长度比那个地址短，所以 address[i] 不存在

【参考方案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 有两个属性state 和city。所以要使用它们，我们可以简单地使用例如item.state.

希望这会有所帮助。

【讨论】：

@Anderson - 感谢您的回复。但 valueItem 仅用于页面渲染逻辑，与地址状态字段无关。在这种情况下我该怎么办。

你能告诉我你是如何在你的 .ts 文件中定义 ValueItem 的吗？

结构类似于 "valueItem": ["name": "sam", "name": "tim", "name": "rob"] .

好吧，现在我明白了。错误“无法读取未定义的属性'状态'”的原因很可能是由于索引引用未命中（如果 ValueItem.length > address.length 发生）。我会认真考虑创建包含名称和地址属性的单一对象数组。在尝试在视图中渲染之前。

你的意思是说创造价值是这样的："valueItem": ["name": "sam", "address": "city": "xxx", "state ": "yyy", "name": "tim", "address": "city": "xxx", "state": "yyy", "name": "rob", "address" “：“城市”：“xxx”，“州”：“yyy”]。但在我的情况下这是不可能的，因为用于渲染逻辑的 ValueItem 不能与模型对象相关联。有没有这样做的替代品？