使用 *ngFor 进行 Angular 子组件渲染在数据更改时非常慢

Question

我使用 ngFor 渲染子组件并使用 lodash 应用某些过滤器，渲染结果非常慢。

父组件：

cities = [];

在父模板中

<app-city *ngFor="let city of cities"></app-city>

在父组件中，当用户单击按钮时，我正在使用 lodash 过滤数据。

this.cities = _.filter(this.cities, (city) => {
    return city.distance > 5;
});

Answer 1

您可以尝试使用管道：要使用 .filter((，您可以定义一个管道(使用 CLI 命令 ng g pipe citydistance (。在此ts中，您必须修改转换方法才能实现过滤器。最后，您必须将其导入ts组件并将其添加到ngFor中，例如let city of cities | citydistance。

希望它可以帮助再见