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>

我只想訪問 *ngFor 之外的過濾結果計數。 不，我不能使用 postsIterableContent.length 因為我得到的長度是 pipe 過濾之前的長度。 訪問過濾后的 pipe 長度的唯一方法是在 *ngFor 中使用 count 變量。 我幾乎搜索了所有答案，但還沒有找到任何東西。

一些解決方案可能是在外部 scope 的模板內聲明一個變量並將其填充到 *ngFor 中，但我還沒有找到任何東西。 我想到的另一種方法是調用 function 並在 controller 內設置 resultsNumber 屬性，但我也無法使其工作。 有人有什么主意嗎？ 當然，我不能在外部 scope 中使用 ng-container 並將 *ngFor 放在那里，因為我不希望我的結果編號在每個元素中都重復。

Answer 1

感謝 Sanjay Choudhary 的想法，我找到了解決方案。 我不知道這是否是最好的方法，但它仍然是唯一有效的方法。 我在使用 *ngFor 的元素上設置了一個模板變量。

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

我已經在 .ts 文件中使用

  @ViewChildren('postingItems') postingItemsInDom: any;

我終於顯示 *ngFor 之外的長度使用

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

唯一的問題是我得到一個控制台錯誤 core.js:6456 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it is checked。 以前的值：'null'。 當前值：'0'..