如何将 ngModel 与 2D 数组进行 2 向绑定？

问题描述

我有一系列事件，因此有些事件可能有过滤器，有些可能没有。对此进行可视化：

[
  {
    type: 'event1',filters: [ { name: 'filter1' },{ name: 'filter2' } ]
  }
  {
    type: 'event2',filters: [ { name: 'filter1' } ]
  }
  {
    type: 'event3',filters: [ ]
  }
]

我尝试对过滤器输入字段进行双向绑定以获取其值，如下所示：

<div *ngFor="let event of events">
...
  <div *ngFor="let filter of event.filters">
    <input id="{{event.type}}.{{filter.name}}" [(ngModel)]="filters[event.type][filter.name]" />
  </div>
</div>

，而在 component.ts 中，我已经声明了 filters: any = [];。 我得到的只是

，这可能与某些事件中缺少过滤器有关。有没有办法正确地做到这一点？

解决方法

如果您希望绑定到 name 数组的 filters 属性，绑定应如下所示

<div *ngFor="let event of events">
  ...
  <div *ngFor="let filter of event.filters">
    <input id="{{event.type}}.{{filter.name}}" [(ngModel)]="filter.name" />
  </div>
</div>