Comment appliquer plusieurs liaisons de modèles sur un élément en angulaire ?

Question

J'utilise le modèle suivant :

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

Cela donne l'erreur suivante :

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

Auparavant, il ne donnait pas d'erreur. J'ai rencontré ce problème après la mise à niveau vers RC4.

Quelle est la solution pour que je puisse appliquer plusieurs liaisons de modèles à un seul élément sans modifier la structure du modèle ?

Answer 1

Il n'est pas possible d'utiliser deux binding template sur un élément en Angular 2 (comme *ngIf et *ngFor). Mais vous pouvez réaliser la même chose en enveloppant l'élément avec un span ou tout autre élément. Il est bon d'ajouter un <ng-container> car c'est un conteneur logique et il ne sera pas ajouté au DOM. Par exemple,

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

Answer 2

Vous pouvez utiliser ce qui suit (version étendue) pour préserver la structure du document (par exemple pour vos sélecteurs 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>

Answer 3

Placez votre *ngIf dans un div parent, et le *ngFor peut rester là où il est.

Par exemple :

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

Answer 4

Si vous utilisez *ngFor et que vous voulez ajouter *ngIf pour vérifier un champ, si la condition n'est pas trop compliquée, j'utilise un filtre pour cela, où j'exécute ma condition et ne retourne que les éléments qui entrent dans ma condition à l'intérieur de cette boucle J'espère que cela vous aidera

quelque chose comme ça où je veux montrer seulement les articles avec la description :

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

davor