Question

我有页面组件，其中包含编辑器和预览组件。

页面包含数组项。

[
    {
        value: 0,
        text: 'Item 1'
    },
    ...
]

数组项目会传递给编辑＆amp;像这样预览：

<editor  [items]="items"></editor>
<preview [items]="items"></preview>

编辑可以添加/删除/编辑/重新排序项目。

问题是预览需要另一种格式的数组。

[
    {
        index: 0,
        label: 'Item 1'
    },
    ...
]

如果我喜欢这个

getRadioItems(): any[] {
    const items = [];
    for (let i = 0; i < this.items.length; i++) {
        items.push({ index: this.items[i].value,
                     label: this.items[i].text });
    }
    return items;
}

然后

<radio-list [radioItems]="getRadioItems()"></radio-list>

每秒刷新无线电列表数百次。您甚至无法更改值，因为它会在每次刷新时重置。

如果没有重新映射 - 它会正常工作。

在这种情况下，将项目重新映射到 radioItems 的正确方法是什么？

Answer 1

您是否尝试将预览组件的ChangeDetectionStrategy设置为OnPush？然后，只应在更新@Input() items时运行更改检测。

Answer 2

这是愚蠢的解决方案，但它确实有效。

getRadioItems(): any[] {
    const newJson = JSON.stringify(this.items);
    if (this.json === newJson) {
        return this.cachedItems;
    }

    this.json = newJson;
    this.cachedItems = [];
    for (let i = 0; i < this.items.length; i++) {
        this.cachedItems.push({ index: this.items[i].value,
                                label: this.items[i].text });
    }
    return this.cachedItems;
}

如何仅在更改时重新映射数组？

2 个答案: