web-dev-qa-db-fra.com

Comment appliquer plusieurs liaisons de gabarit sur un élément dans angular

J'utilise un modèle comme suit:

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

Donc, 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, je ne faisais pas d'erreur. J'ai fait face à ce problème après la mise à niveau vers RC4.

Alors, quelle est la solution de contournement, afin que je puisse appliquer la liaison de plusieurs modèles sur un seul élément sans modifier la structure du modèle.

angularangular-directiveangular-template
67
Akhilesh Kumar

Impossible d'utiliser deux modèles de liaison sur un élément dans Angular 2 (comme * ngIf et * ngFor). Mais vous pouvez obtenir le même résultat en enveloppant l'élément avec une étendue ou tout autre élément. Il est bon d’ajouter avec un <ng-container> car il s’agit d’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>
130
Mohammed Safeer

Vous pouvez utiliser les éléments suivants (version développée) pour conserver 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>
13
typesafe

Mettez votre * ngIf dans un div parent, et le * ngFor peut rester 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>
3
Andy-Delosdos

Si vous utilisez * ngFor et souhaitez ajouter * ngIf pour vérifier un champ, si le conditionnel n’est pas trop compliqué, j’utilise un filtre pour cela. ça aide

quelque chose comme ça où je veux montrer seulement les objets avec 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>

savourer

1
Davor