Как применить несколько привязок шаблона к одному элементу в angular

Я использую такой шаблон:

<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 angular-directive angular-template
person Akhilesh Kumar    schedule 26.07.2016    source источник
comment
ngIf & ngFor оба являются структурными директивами, они не могут быть там в одном элементе .. Для работы вы можете проверить это комментарий по проблеме github   -  person Pankaj Parkar    schedule 26.07.2016
comment
Но раньше (RC1) он работал.   -  person Akhilesh Kumar    schedule 26.07.2016

Ответы (4)


arrow_upward
196
arrow_downward

Невозможно использовать привязку двух шаблонов к одному элементу в Angular 2 (например, * ngIf и * ngFor). Но вы можете добиться того же, обернув элемент диапазоном или любым другим элементом. Хорошо добавлять <ng-container>, поскольку это логический контейнер, и он не будет добавлен в DOM. Например,

<ng-container *ngIf="condition">
    <li *ngFor="let item of items">
        {{item}}
    </li>
</ng-container>
person Mohammed Safeer    schedule 08.05.2017
comment
это решение не всегда работает. например два нг-контейнера - person titusfx; 26.07.2017
comment
Я просто изменил, добавив div с условием * ngIf = вместо этого ng-контейнера. Между тем, я использую angular 6. Это изменение работает для меня. - person Günay Gültekin; 03.07.2018

arrow_upward
15
arrow_downward

Вы можете использовать следующую (расширенную версию), чтобы сохранить структуру документа (например, для ваших селекторов 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>
person typesafe    schedule 02.09.2016

arrow_upward
4
arrow_downward

Поместите свой * 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>
person Andy-Delosdos    schedule 26.07.2016
comment
Но для этого мне нужно изменить структуру шаблона и CSS (соответствующий селектор). Нет другого обходного пути без изменения структуры шаблона. - person Akhilesh Kumar; 26.07.2016
comment
Нет ли решения, похожего на stackoverflow.com/questions/10700020/ - person Akhilesh Kumar; 26.07.2016
comment
Это правда. Вы можете определить родительский элемент как диапазон, если это поможет вашему CSS. Или даже создайте собственный элемент: <test *ngIf="1==1"><div></div></test> например - person Andy-Delosdos; 26.07.2016
comment
Хотя это немного чушь, одним из вариантов было бы сделать элемент div невидимым с помощью display:none, а затем использовать *ngFor. Однако это не приведет к удалению элемента из DOM, как это делает *ngIf, так что это не очень хорошо - person Andy-Delosdos; 26.07.2016
comment
Теперь я обновил свой сценарий. Теперь вы можете понять, почему я не могу использовать ваше решение. Поскольку выход из системы всегда будет виден, а изменение селектора ul ›li невозможно (в css требуется много изменений). - person Akhilesh Kumar; 26.07.2016
comment
Итак, единственное решение, которое я получаю, - это репликация ul с условием * ngIf - person Akhilesh Kumar; 26.07.2016
comment
Неа ... Но все равно спасибо;) - person Cody; 01.02.2017

arrow_upward
2
arrow_downward

Если вы используете * 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>

Давор

person Davor    schedule 02.09.2016
comment
Angular 2 не имеет метода фильтрации. См. angular.io/docs/ts/latest /guide/pipes.html#!#no-filter-pipe. - person SoftwareAndOutsourcing; 24.11.2016