Как получить количество массивов * ngFor в файле COMPONENT

Question

Как связать переменную c (количество элементов данных) с переменной в файле component.ts ?

В HTML-файле:
<tr *ngFor="let entry of data; let c = count>

В файле component.ts:

if (c > 5) ... else ...

Ради простоты, давайте предположим, что data генерируется динамически, поэтому мы не можем использовать data в нашем компоненте. Единственное, чего я хочу добиться, это использовать c в файле компонента.

Это НЕ ДУБЛИРУЕТ это: Решение Гюнтерса Я хочу очистить привязку данных, не полагаясь на сгенерированный DOM.

ОБНОВЛЕНИЕ: Реальный сценарий более сложный, я не хотел добавлять его, чтобы сосредоточиться на вышеупомянутом вопросе, но, поскольку кто-то спросил его, он здесь:

В файле HTML:
<tr *ngFor="let entry of data | someFilter; let c = count>

В component.ts:
if (c> 5) ... // c здесь количество элементов данных после фильтрации данных

Да, я знаю, что могу вручную вызвать someFilter в коде компонента и затем подсчитать количество элементов данных, но это не является предпочтительным решением, когда у вас есть каналы.

Answer 1

Ну, я полагаю, вы можете использовать такие как:

<div *ngFor=".......;let i=index;let last=last;">
  <!--put here your data-->
  <ng-container *ngIf="last">
       Total Count {{i+1}}
  </ng-container>
</div>

Но я думаю, что это почти "bizarro". Я продолжаю думать, что лучший подход состоит в том, чтобы иметь две переменные: data и dataFiltered, вычислять dataFiltered и делать * ngFor поверх dataFilteres.

Answer 2

Вы можете добавить еще одну трубу после вашей фильтрующей трубы "someFilter", сосчитать элементы и сохранить результат в сервисе. Тогда к нему можно получить доступ из любого места.

transform(input: Model[]): Model[] {
    if (input && this.myService.count !== input.length) {
        this.myService.count = input.length;
    }

    return input;
}

Answer 3

Просто создайте переменную c в вашем component.ts

c = arrayName.length;

Или вы можете сделать это в html напрямую.

<span>Count: {{arrayName.length}}</span>