Question

我是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>

所以我想遍历产品数组，如果产品的分销商ID与其他数组的分销商ID匹配，我会打印出新的li元素。

不幸的是我收到了错误：

一个元素上不能有多个模板绑定。仅使用一个名为“template”的属性或以*
为前缀的属性
[错误 - ＆gt;] * ngIf =“product.distributor.id == distributor.id”

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

Answer 1

您不能在一个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)

Answer 2

Angular不支持同一元素上的多个结构指令，因此您应该在此处使用ng-container辅助元素。 FYI 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>

Answer 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>

如何将ngIf与ngFor结合起来

3 个答案: