Angular의 한 요소에 여러 템플릿 바인딩을 적용하는 방법

Angular의 한 요소에 여러 템플릿 바인딩을 적용하는 방법

---

이 질문에 이미 답변이 있습니다.

• * ngIf 및 * ngFor on <td> </ td> 요소 4 답변

다음과 같은 템플릿을 사용하고 있습니다.

<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로 업그레이드 한 후이 문제에 직면하여 오류가 발생하지 않았습니다.

그래서 해결 방법은 무엇입니까? 그래서 템플릿 구조를 변경하지 않고 단일 요소에 여러 템플릿 바인딩을 적용 할 수 있습니다.

---

Angular 2의 한 요소에 두 개의 템플릿 바인딩을 사용할 수 없습니다 (예 : * ngIf 및 * ngFor). 그러나 요소를 범위 또는 다른 요소로 래핑하여 동일한 결과를 얻을 수 있습니다. <ng-container>논리적 컨테이너이므로 를 추가하는 것이 좋으며 DOM에 추가되지 않습니다. 예를 들면

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

---

다음 (확장 버전)을 사용하여 문서 구조를 보존 할 수 있습니다 (예 : 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>

---

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

---

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

감히

참고 URL : https://stackoverflow.com/questions/38585720/how-to-apply-multiple-template-bindings-on-one-element-in-angular