Блог

Я использую Angular 10 и *ngIf директиву для создания переменной в моем HTML-шаблоне, как в приведенном ниже коде:

 <div *ngIf="function() as foo">
    <p>Header</p>
    <div *ngFor="let x of foo">
    ....
    </div>
    <div *ngFor="let y of foo">
    ....
    </div>
</div>
  

Причина, по которой я не вызываю function() in *ngFor напрямую, заключается в том, что я использую массив foo в нескольких других областях шаблона, а функция очень дорогостоящая.

Теперь моя проблема в том, что если function возвращает пустой массив, весь шаблон становится пустым, включая <p> директиву

Есть ли какой-либо способ, как я все еще могу отобразить контейнер, хотя files он пуст? Я попробовал приведенный ниже код, но, похоже, это недопустимый синтаксис:

 *ngIf="(function() as foo) || true"
  

В идеале то, что вы искали бы здесь, *ngLet но это еще не реализовано. Но вы можете найти различные сторонние библиотеки, которые предоставляют такую директиву. Однако Игорь Минар, член команды Angular core, заявил, что с точки зрения производительности они не очень хороши (но, безусловно, пригодны на данный момент), поскольку на них приходится полагаться createEmbeddedView , что для этого довольно дорого.

Лучшим ответом было бы сохранить результат выполнения функции в члене класса. Особенно, если функция является дорогостоящей для запуска из-за обнаружения изменений, даже если вы выполнили вышеуказанное, она все равно будет выполняться довольно часто (если вы сами не возьмете под особый контроль обнаружение изменений). Таким образом, вы можете полностью контролировать, как часто и когда оценивается функция.

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

TL; DR Вызов (дорогостоящих) функций из шаблона просто не является хорошей идеей в Angular.