Angular 5 setter @Input 不起作用

Question

我有一个基于 Angular 5 的项目。假设我有两个组件：ParentComponent 和 ChildComponent。 ChildComponent 有 public setter 和 @Input() 装饰器。我从父组件给它属性，稍后会更改。

我的问题是 - 这个 setter 不适用于地图、接口、对象

{ [ key: string ]: boolean }

仅适用于数组和基元。

嗯，它有效，但只有一次。

我已经明白这是数据类型的问题，但谁能给出一个很好的解释或link文档？在带有文档的 Angular 网站上未找到允许的数据类型。

这是怎么回事？

Link 如果有人需要，请窃听：https://plnkr.co/edit/WBS55F3wZSYI0qGNEGSd?p=preview

如你所见，有3个setter，它们在第一次起作用，然后只有Array和String setter起作用。为什么？

更新：如果我通过其已经存在的键在 Map 中更改一些值，看起来它可以工作，但如果我添加新的键=>值对，它就不起作用。

Answer 1

字段mapItemsData和arrayItemsData都只设置了一次。每次对象引用更改时都会设置字段 stringItemData，这是因为它是字符串类型并且字符串是不可变的。 this.stringItem += this.iterationValue.toString(); 行实际上在每次调用时都会创建一个新的字符串引用，这会导致使用新值再次调用子组件的 setter。

您没有看到 mapItemsData 数据更新的原因是您无法使用 *ngFor 对其进行迭代，但是如果将其添加到模板中，您可以看到同一个对象已更新

{{mapItems.size}}

如果您想迭代 Map 集合，您可以使用 entries().

<div *ngFor="let item of mapItems.entries()">{{ item }}</div>

有关类型的更多信息Map see the documentation。

您还需要更改您的设置代码，这样您就不会指向不同的（新的）实例，而是指向您的父（包含）组件中引用的同一实例。

public set mapItemsData(set: Map<string, boolean>) {
    // this.mapItems = []; <- you were changing the reference here
    this.mapItems = set; // this is really all you need
}

Updated plunker

Angular 5 setter @Input 不起作用

Angular 5 setter over the @Input doesn't work

angular2-changedetection

angular