Question

我如何在Map对象上使用双向绑定？

以下代码无法按预期工作：

组件：

@Component({
    moduleId:    module.id,
    selector:    "my-component",
    templateUrl: "my-component.html",
    styleUrls:   ["my-component.scss"],
})
export class MyComponent {
    myMap: Map<string, Object> = Map<string, Object>()
        .set('first', {text: 'abc'})
        .set('second', {text: 'foo'})
    ;
}

模板：

<div class="items" *ngFor="let item of myMap.values()">
    <input type="text" [(ngModel)]="item.text" />
</div>

Answer 1

实际上，在此示例中，双向数据绑定按预期工作。可能您的错误在于创建Map对象：

myMap: Map<string, Object> = Map<string, Object>()

您必须在new之前加入Map关键字（因为无法调用Map Constructor）：

myMap: Map<string, Object> = new Map<string, Object>()
        .set('first', {text: 'abc'})
        .set('second', {text: 'foo'})

现在一切正常。您也可以选中此stackblitz demo。

注意：根据GitHub上的this Angular issue：地图在键中没有顺序，因此它们的迭代是不可预测的。 ng1支持此功能，但我们认为这是一个错误，NG2将不支持此功能。

最简单的解决方案之一-在Array.from()上使用myMap.entries()方法：

getEntities() {
  // this will return [['first', { text: 'abc' }], ... ]
  // and after mapping we get [{ text: 'abc' }, ...]
  return Array.from(this.myMap.entries()).map(item => item[1]);
}

现在我们可以在模板中使用它：

<div class="items" *ngFor="let item of getEntities()">
  <input type="text" [(ngModel)]="item.text" />
</div>

在此示例中，双向数据绑定也起作用。

Angular2：Map对象的双向绑定

1 个答案: