Angular - *ngFor OUTSIDE of the *ngFor 的访问计数使用过滤器 pipe

Question

           <div class="postings-list-results-number">
                {{resultsNumber}} results
            </div>
            <div class="postings-list-element" *ngFor="let posting of postingsIterableContent | async | postingsFilter:'54016'; let resultsNumber = count">
                <div class="postings-list-element-title">
                    {{posting.name}}
                </div>
             </div>

I just want to access the filtered results count OUTSIDE of the *ngFor. No I can not use postingsIterableContent.length because the lenght I get is the length before the pipe filtering. The only way to access the filtered pipe length is inside the *ngFor with the count variable. I've searched almost every answer and I haven't found anything yet.

Some solutions could be to declare a variable inside the template in the outter scope and fill it inside the *ngFor but I haven't found anything yet. Another way I thought about is to call a function and set the resultsNumber property inside the controller but I can not make it work either. Does anyone have any idea? Of course I can not use an ng-container in the outter scope and put the *ngFor in there because I don't want my results number to be repeated in every element.

Answer 1

I found a solution thanks to Sanjay Choudhary's idea. I do not know if it's the best approach but still it's the only one it's working. I set a template variable on the element I've used the *ngFor on.

            <div #postingItems class="postings-list-element" *ngFor="let posting of postingsIterableContent | async | postingsFilter:'54016';">

I've accessed it in the.ts file using

  @ViewChildren('postingItems') postingItemsInDom: any;

and I finally display the length outside the *ngFor using

<div class="postings-list-results-number">
                {{(postingItemsInDom)?.length}} results
  </div>

The only problem is that I get a console error core.js:6456 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: '0'..