Angular 检查角度为5*ngIf的数组长度不显示任何内容

我正在执行*ngif以检查筛选结果长度是否为0显示项，否则显示模板错误

不幸的是，templateref仅在筛选结果包含项时才起作用

否则，result.length将不显示任何内容

<div *ngFor="let collection of collections | async | filterBy: ['title']: search as result">
       <ng-container *ngIf='result?.length != 0; 
           then resultsIs else noresults'>
       </ng-container>

        <ng-template #resultsIs>
          <a routerLink="/collections/c/{{collection.title | 
            slugify}}/{{collection.id}}" 
               class="list-group-item list-group-item-action flex-column align-items-start"
          >
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1 text-primary"><u>{{collection.title}}</u></h5>
           <small>{{collection.updatedAt}}</small>
           </div>
           <p class="text-muted" >{{collection.description}}</p>
           <small>{{collection.username}}</small>
      </a>
    </ng-template>

    <ng-template #noresults>
     <div class="alert alert-info">
    <strong>No Match Found!</strong>
     Widen your search.</div>
       </ng-template>
     </div>

如何正确检查此对象数组长度是否小于零，以便显示模板的这一部分

 <ng-template #noresults>
        <div class="alert alert-info"><strong>
          No Match Found!</strong> Widen your search.
         </div>
</ng-template>

---

模板的*ngIf位于ngFor中，它在过滤列表中循环

我不确定您是如何实现过滤管道的，但我想如果集合列表与过滤条件不匹配，它将返回一个空集

在这种情况下，作为正常行为，ngFor将不会渲染任何元素，因此内部的所有内容将永远不会通过角度评估

如果提供给ngFor的列表中没有元素，则需要指定默认模板。这还不受支持，但通过查看此请求的最近提交，这可能很快就会可用

我的意思是，你可以这样做

<div *ngIf='collections | async | filterBy: ['title']: search'; let filteredCollections>


    <div *ngFor="let collection of filteredCollections">


              <a routerLink="/collections/c/{{collection.title | 
                slugify}}/{{collection.id}}" 
                   class="list-group-item list-group-item-action flex-column align-items-start"
              >
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1 text-primary"><u>{{collection.title}}</u></h5>
               <small>{{collection.updatedAt}}</small>
               </div>
               <p class="text-muted" >{{collection.description}}</p>
               <small>{{collection.username}}</small>
          </a>


     </div>



    <div class="alert alert-info" *ngIf='filteredCollections.length === 0'>
        <strong>No Match Found!</strong>
        Widen your search.
    </div>

</div>

---

你试过这个吗？我试过了ViewChildren ref工作正常，但这是否回答了您的问题？不，它没有！在前面的文章中，您提到了它的工作原理。那你期待什么呢？