Как улучшить этот код Angular и вызвать метод один раз? - PullRequest
Новая
       25

Как улучшить этот код Angular и вызвать метод один раз?

0 голосов
/ 31 октября 2019

У меня есть структура 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');
}

Ответы [ 2 ]

4 голосов
/ 31 октября 2019

Это совершенно неверно с точки зрения дизайна.

Вы должны сохранить ваши данные JSON в какую-то переменную, которая возвращается методом getLanguages(group), а затем вы должны создать условие на основе этой переменной.

Иначе, ваш метод будет вызывать этот метод снова и снова при каждом обнаружении изменений, которые вызывают проблемы с производительностью вашего приложения.

1 голос
/ 01 ноября 2019

Вызов метода из цикла не является правильным способом. Вы можете создавать и использовать пользовательские 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'. См. Это для более Как применить фильтры к * ngFor?

...