webentwicklung-frage-antwort-db.com.de

So wenden Sie mehrere Vorlagenbindungen auf ein Element in angular an

Ich benutze die Vorlage wie folgt:

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

So gibt es folgenden Fehler:

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">
"): [email protected]:94

Bisher gab es keinen Fehler. Nach dem Upgrade auf RC4 trat dieses Problem auf.

Was ist also die Problemumgehung? Ich kann mehrere Vorlagenbindungen auf ein einzelnes Element anwenden, ohne die Vorlagenstruktur zu ändern.

angularangular-directiveangular-template
67
Akhilesh Kumar

Es können nicht zwei Vorlagen für ein Element in Angular 2 (wie * ngIf und * ngFor) verwendet werden. Sie erreichen dies jedoch, indem Sie das Element mit einem Span oder einem anderen Element umschließen Es ist gut, ein <ng-container> anzufügen, da es sich um einen logischen Container handelt und nicht an das DOM angehängt wird.

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

Sie können die folgende (erweiterte Version) verwenden, um die Dokumentstruktur beizubehalten (z. B. für Ihre CSS-Selektoren):

<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

Legen Sie Ihren * ngIf in ein übergeordnetes div, und der * ngFor kann dort bleiben, wo er ist.

Zum Beispiel:

<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

Wenn Sie * ngFor verwenden und * ngIf hinzufügen möchten, um ein Feld zu überprüfen, und wenn die Bedingung nicht zu kompliziert ist, verwende ich Filter dafür, wobei ich meine Bedingung ausführe und nur Elemente zurückgebe, die in meinen Zustand innerhalb dieser Schleife eintreten es hilft

so etwas wo ich nur artikel mit beschreibung zeigen möchte:

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

schmecken

1
Davor