web-dev-qa-db-ja.com

angularの1つの要素に複数のテンプレートバインディングを適用する方法

私は次のようなテンプレートを使用しています：

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

したがって、次のエラーが発生します。

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

以前はエラーが発生していませんでしたが、RC4へのアップグレード後にこの問題に直面しました。

そのため、回避策として、テンプレート構造を変更せずに単一の要素に複数のテンプレートバインディングを適用できます。

angularangular-directiveangular-template
63
Akhilesh Kumar

Angular 2の1つの要素で2つのテンプレートバインディングを使用できません（* ngIfや* ngForなど）。ただし、要素をスパンまたは他の要素でラップすることで同じことを実現できます。 <ng-container>を追加するのは良いことです。これは論理コンテナーであり、DOMに追加されないためです。例えば、

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

次の（拡張バージョン）を使用して、ドキュメント構造を保持できます（CSSセレクターなど）：

<template [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>
</template>
12
typesafe

* 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>
2
Delosdos

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

勇気

1
Davor