如何改进此代码 Angular 并调用一次方法？

Question

我有一个DOM结构：

<div class="dropmenu_block_header" *ngIf="getLanguages(group).length">
    <div *ngFor="let language of getLanguages(group); trackBy: trackByFn"></div>
</div>

正如您在模板中看到的那样，有两个调用：

*ngIf="getLanguages(group).length"

*ngFor="let language of getLanguages(group)"

如何优化这个并调用一次方法？

我的方法是：

getLanguages(group: IGroupLanguage) {
    console.log(group.languages);
    return group.languages.filter((item) => item.Name === 'Russian');
}

Answer 1

这是完全错误的设计。

您应该将 JSON 数据保存到方法 getLanguages(group) 返回的某个变量中，然后您必须根据该变量制定条件。

否则，您的做法会在每次更改检测期间一次又一次地调用此方法，这会导致您的应用程序出现性能问题。

Answer 2

从循环中调用方法不是正确的方法，您可以创建和使用自定义 pipe。

Html

<div class="dropmenu_block_header">
    <div *ngFor="let language of group.languages | filter : 'Russian'"></div>
</div>

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {

    transform(items: any[], searchText: string): any[] {
        if(!items) return [];
        if(!searchText) return items;
        searchText = searchText.toLowerCase();
        return items.filter( it => it.Name.toLowerCase() == searchText);
    }
}

您也可以使用变量代替 'Russian'。参考这个了解更多

如何改进此代码 Angular 并调用一次方法？

How to improve this code Angular and call method once?

angular

angular5

angular8