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

【问题标题】：How to 2-way bind a ngModel with a 2D array?如何将 ngModel 与 2D 数组进行双向绑定？
【发布时间】：2021-09-02 03:46:37
【问题描述】：

我有一个事件数组，有些事件可能有过滤器，有些可能没有。可视化：

[
  {
    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 = [];。我得到的只是，这可能与某些事件中缺少过滤器有关。有没有办法正确地做到这一点？

【问题讨论】：

标签： angular angular-ngmodel ngmodel

【解决方案1】：

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

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

【讨论】：

感谢您的回答。如果这样做，每个过滤器的输入值（输入内的文本）将只包含过滤器名称。
@m.f: 您希望将<input> 绑定到哪个属性？
因此，我希望能够以这样一种方式获取输入值的 filter 数组，以便我可以访问它，例如。 filters[event1][filter1] 给了我来自 event1 -> filter1 文本输入字段的文本值。
对不起，我不明白。根据您的对象，您可以访问filters[0][name]。我不明白你说的filters[event1][filter1] 是什么意思。
事情是，我认为 ngModel 不允许我双向绑定 根本没有过滤器的事件 - 因此未定义错误。