如何将 ngIf 与 ngFor 结合使用答案

【问题标题】：How to combine ngIf with ngFor如何将 ngIf 与 ngFor 结合使用
【发布时间】：2018-03-21 11:14:29
【问题描述】：

我是 Angular 的新手。

我想打印与经销商有关的产品列表。为此，我考虑过结合 *ngFor *ngIf 所以这里有一个代码：

<div class="distributors-here ui-g-12" *ngIf="distributors">
  <h2 >Distributors  <i class="fa icon fa-plus"(click)="showDialog()"></i></h2>
  <p class="error-message" *ngIf="errorMessage.length >0">Operation couldn't be executed:</p>
  <p class="error-message">{{errorMessage}}</p>
  <ul class="distributors-list ui-g-12">
    <li class="distributor-item ui-md-3 ui-g-6" *ngFor="let distributor of distributors ">
      <i class="fa icon fa-times remove-distributor"(click)="removeDistributor(distributor.id,distributor.name)"></i>
      <div class="distributor-item-content">
        <p>id: {{distributor.id}}</p>
        <p>name: {{distributor.name}}</p>
          <div *ngIf="products">
            <p>products</p>
            <ol>
              <li  *ngFor="let product of products" *ngIf="product.distributor.id == distributor.id">dist</li>
            </ol>
          </div>
      </div>
    </li>
  </ul>
</div>

所以我想遍历 products 数组，如果产品的分销商 id 与其他数组中的分销商 id 匹配，我将让它打印新创建的 li 元素。

不幸的是，我收到一个错误：

一个元素上不能有多个模板绑定。仅使用一个名为“模板”或以 * 为前缀的属性

[错误 ->]*ngIf="product.distributor.id==distributor.id"

有谁知道如何重构此代码以使其正常工作？

【问题讨论】：

标签： angular

【解决方案1】：

Angular 不支持在同一个元素上使用多个结构指令，因此您应该在此处使用 ng-container 辅助元素。仅供参考 ng-container 不会向 DOM 添加额外元素（示例 2 中的 ul 确实会添加到 DOM）。

示例 1

<ng-container *ngFor="let product of products" >
   <li *ngIf="product.distributor.id == distributor.id">{{ product?.name  }}</li>
</ng-container>

或

示例 2

<ul *ngFor="let product of products">
  <li *ngIf="product.distributor.id == distributor.id">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </li>
</ul>

【讨论】：

【解决方案2】：

您不能在一个 html 元素上使用多个结构指令。例如，您可以将 *ngFor 放在 <ng-container> 中，并将其包裹在 <li> 元素周围。 <ng-container> 的优势在于它不会引入额外的 HTML 级别。

<ol>
  <ng-container *ngFor="let product of products">
    <li *ngIf="product.distributor.id == distributor.id">dist</li>
  </ng-container>
</ol>

有关更多详细信息，请查看Official Angular Documentation (One structural directive per host element)

【讨论】：

【解决方案3】：

您可以使用 <ng-container> 来拥有 ngIf

<div *ngIf="products">
   <p>products</p>
     <ol>
             <ng-container *ngFor="let product of products" >
             <li *ngIf="product.distributor.id == distributor.id">dist</li>
    </ol>
</div>

【讨论】：

你真的可以使用多个 ng-containers 吗？