Question

我有一个基于Angular 5的项目。可以说我有两个组件：ParentComponent和ChildComponent。 ChildComponent有一个带有@Input()装饰器的公共制定者。我从父组件中给它属性，稍后将更改它。

我的问题是 - 这个setter不能使用地图，接口，像

这样的对象

{ [ key: string ]: boolean }

仅使用数组和基元。

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

我已经明白它是数据类型的东西，但是谁可以提供一个很好的解释或链接到文档？没有使用docs在Angular网站上找到允许的数据类型。

这里有什么问题？

如果有人需要，请链接到plunker：https://plnkr.co/edit/WBS55F3wZSYI0qGNEGSd?p=preview

正如您所看到的，有3个setter，它们第一次工作，然后只有Array和String setter工作。为什么呢？

更新：如果我使用已存在的密钥更改Map某个值，看起来是有效的，但如果我添加新的key =＆gt;值对，则无效。

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类型的详细信息，请参阅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

@Input上的Angular 5 setter不起作用

1 个答案: