Блог

Главная - Вопросы по программированию - Объединение класса и данных в итерации при использовании ngFor

Объединение класса и данных в итерации при использовании ngFor

#angular #typescript

Вопрос:

У меня есть таблица, в которой каждая строка была создана с использованием ngFor

  <tbody>
    <tr *ngFor="let item of Details">
        <div class="row details-row row-cols-lg-2 row-cols-1" *ngIf="closureDetails">
            <div class="col" [ngClass]="{'d-none':getMilestones(item.ProjectCode)?.length===0}">
                <app-milestone [milestones]="getMilestones(item.ProjectCode)"></app-milestone>
            </div>
            <div class="col" [ngClass]="{'d-none':getRisks(item.ProjectCode)?.length===0}">
                <app-risk [risks]="getRisks(item.ProjectCode)"></app-risk>
            </div>
        </div>
    </tr>
</tbody>

Здесь, как вы можете видеть, я устанавливаю класс для столбцов, используя ту же функцию для передачи данных дочернему компоненту. Но меня беспокоит то, что функция срабатывает дважды, и в первый раз это просто для переключения видимости DIV.COL

Когда есть более 300 строк, что стоит 600 обращений к одной и той же функции, что вызывает некоторую задержку в процессе.

Поэтому, пожалуйста, предложите хороший подход для оптимизации этого требования

Комментарии:

1. Прежде всего, почему вы никогда не должны использовать вызовы функций в выражениях шаблона Angular

2. «функция срабатывает дважды» — вы уверены, что она срабатывает только дважды? Привязка функций к директивам и свойствам со стратегией обнаружения изменений по умолчанию будет запускать функцию для каждого цикла обнаружения изменений. Другими словами, возможно, слишком много раз, чем вы думаете.

3. Это определенно вызовет более двух раз.

4. @MichaelD Вы абсолютно правы.. Я проверил количество попаданий и его более 2. Я понятия не имел.. Я новичок в Angular

Ответ №1:

Как сказал @ricky, вы никогда не должны использовать вызовы функций в выражениях шаблонов

Решение: (Выберите вехи в качестве примера)

Введите переменные в компонент и используйте его в качестве шаблона для замены привязок функций:

 `hasMileStones` for `getMilestones(item.ProjectCode)?.length===0}`

`projectCodeToMileStonesMap[item.ProjectCode]` for `getMilestones(item.ProjectCode)`

Шаблон:

 <div class="col" [ngClass]="{'d-none':!hasMileStones}">
    <app-milestone [milestones]="projectCodeToMileStonesMap[item.ProjectCode]"></app-milestone>
</div>

Комментарии:

1. Спасибо. projectCodeToMileStonesMap — это переменная массива, не так ли?

2. это может быть объект, зависит от того, какова ваша структура данных. если структура данных: {projectCode: mileStoneObj}, это может быть объект

Метки: