如何在angular中的一个元素上应用多个模板绑定

我使用的模板如下所示：

<ul [ngClass]="{dispN: !shwFilter,'list-group':true,'autoS':true,'dispB':shwFilter,'myshddw':true}" style=";display: none">
  <li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
    <div *ngIf="valm1 && valm1.type=='1'">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <p style="margin: 8px;">{{valm1['body']}}</p>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
    <div *ngIf="valm1 && valm1.type=='2'" (click)="modlTxt=valm1;notREadVu(j)" data-toggle="modal" data-target="#myModal">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
    <div *ngIf="valm1 && valm1.type=='3'">
      <h5 style="padding:8px;margin: 0;">{{valm1['header']}}</h5>
      <p style="margin: 8px;">{{valm1['body']}}</p>
      <h6 style="padding:8px;margin: 0;">{{valm1['note']}}</h6>
    </div>
  </li>
  <li [ngClass]="{bgDFF: !colps[j],'list-group-item':true,'lgOt':true}" (click)="logout()">
    <span class="title">Log Out <i class="fa fa-sign-out"></i></span>
  </li>
</ul>

{{valm1['header']}
{{valm1['body']}
{{valm1['note']}
{{valm1['header']}
{{valm1['note']}
{{valm1['header']}
{{valm1['body']}
{{valm1['note']}


注销

因此，它给出了以下错误：

EXCEPTION: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("one">
  <li *ngIf="itsNotF && itsNotF.length" [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" [ERROR ->]*ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
"): App@78:94

异常：模板分析错误：
一个元素上不能有多个模板绑定。仅使用一个名为“template”或前缀为*（“one”）的属性
]*ngFor=“let valm1 of itsNotF；let j=index；”（单击）=“togFltr（j）”style=“padding:0；background:#fff”>
"): App@78:94

以前它没有给出错误，我在升级到RC4后遇到了这个问题

那么解决方法是什么呢？这样我就可以在单个元素上应用多个模板绑定，而不必改变模板结构

---

将*ngIf放入父div中，*ngFor就可以留在原来的位置

例如：

<div *ngIf="itsNotF && itsNotF.length">
    <div [ngClass]="{bgDFF: !colps[j],'list-group-item':true}" *ngFor="let valm1 of itsNotF;let j=index;" (click)="togFltr(j)" style="padding: 0;background: #fff">
    </div>
</div>

---

如果您使用*ngFor并希望添加*ngIf以检查某些字段，如果条件不是太复杂，我将使用过滤器，在这里我运行条件并仅返回在循环中输入条件的项目。希望有帮助

类似于此，我只想显示带有说明的项目：

<div class="delivery-disclaimer" *ngFor="let payment of cart.restaurant.payment_method | filter:[{short_name: cart.payment_method}] | onlyDescription" text-wrap>
        <ion-icon item-left name="information-circle"></ion-icon> {{payment.pivot.description}}
    </div>

{{payment.pivot.description}

davor

您可以使用以下（扩展版本）来保留文档结构（例如，用于css选择器）：

---

不能在Angular 2中的一个元素上使用两个模板绑定（如*ngIf和*ngFor）。但可以通过使用span或任何其他元素包装元素来实现相同的效果。最好使用

进行附加，因为它是一个逻辑容器，不会附加到DOM中。例如

<ng-container *ngIf="condition">
    <li *ngFor="let item of items">
        {{item}}
    </li>
</ng-container>

{{item}}

ngIf

&

ngFor

都是结构指令，它们不可能在同一个元素上。对于解决方法，您可以检查它，但之前（RC1）它是有效的。但为此，我必须更改模板结构和CSS（相应的选择器）。在不改变模板结构的情况下，是否有其他解决方法。是否有任何类似的解决方案是正确的。如果有助于CSS，您可以将父元素定义为一个span。甚至可以创建自定义元素：

例如，尽管这有点垃圾，但一个选项是使用

显示：无然后使用
*ngFor
。但是，这不会像
*ngIf
那样从DOM中删除元素，所以这不是很好现在我更新了我的场景，现在你可以理解为什么我不能使用你的解决方案，因为行注销总是可见的，并且不可能更改ul>li选择器（需要在css中进行大量更改）.Angular 2没有筛选方法。请参阅。此解决方案并不总是有效。例如，两个ng容器我刚刚更改为使用*ngIf=“condition”添加div，而不是此ng容器。同时，我使用Angular 6。此更改对我有效。
<ng-container *ngIf="condition">
    <li *ngFor="let item of items">
        {{item}}
    </li>
</ng-container>