하나의 요소에 여러 템플릿 바인딩을 각도로 적용하는 방법

하나의 요소에 여러 템플릿 바인딩을 각도로 적용하는 방법

이 질문에는 이미 다음과 같은 답이 있습니다.

*ngIf 및 *ngFor on <td> </td> 요소 (4개 답변)

마감됨5년 전에.

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

<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를 사용하고 있고 *ngFor를 추가하고 싶다면, 조건이 너무 복잡하지 않다면, 나는 그것을 위해 필터를 사용하고, 내 조건을 실행하고 그 루프 안에 내 조건에 입력된 항목만 반환합니다.도움이 되길 바랍니다.

설명이 있는 항목만 표시하려는 경우와 유사합니다.

<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