tablas - ngfor angular 6

Cómo aplicar múltiples enlaces de plantilla en un elemento en angular

Question

Esta pregunta ya tiene una respuesta aquí:

• * ngIf y * ngFor on <td> </td> element [duplicate] 4 respuestas

Estoy usando una plantilla como la siguiente:

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

Entonces da el siguiente error:

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

Anteriormente no daba error, me enfrenté a este problema después de actualizar a RC4.

Entonces, ¿cuál es la solución, para que pueda aplicar el enlace de varias plantillas en un solo elemento sin alterar la estructura de la plantilla.

Answer 1

No se puede usar el enlace de dos plantillas en un elemento en Angular 2 (como * ngIf y * ngFor). Pero puede lograr lo mismo envolviendo el elemento con un span o cualquier otro elemento. Es bueno agregarlo con un <ng-container> ya que es un contenedor lógico y no se agregará al DOM. Por ejemplo,

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

Answer 2

Ponga su * ngIf en un div padre, y el * ngFor puede permanecer donde está.

Por ejemplo:

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

Puede usar lo siguiente (versión expandida) para preservar la estructura del documento (por ejemplo, para sus selectores 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 4

Si está usando * ngFor y desea agregar * ngIf para verificar algún campo, si condicional no es demasiado complicado, uso el filtro para eso, donde ejecuto mi condicional y devuelvo solo los elementos que ingresan en mi condición dentro de ese ciclo. Espero ayuda

algo así donde quiero mostrar solo elementos con descripción:

<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