почему * ngIf не работает с ng-template?

У меня в шаблоне есть следующее условие:

<ng-container>
    <p *ngFor="let seat of InfoDetails?.seatInfo">
        <template *ngIf="seat.section">
            Section {{seat?.section}} ,
        </template>
        <template *ngIf="seat.row">
            Row {{seat?.row}},
        </template>
        <template *ngIf="seat.seatNo">
            Seat number {{seat?.seatNo}}
        </template>
    </p>
</ng-container>

У меня есть набор данных, содержащий row и seatNo, но, похоже, он не печатается в шаблоне. в чем проблема?


angular angular2-template ng-template
person Community    schedule 30.06.2017    source источник
comment
Каковы предпочтительные значения для seat.section, потому что в этом случае вам следует провести сравнение   -  person Sahan Serasinghe    schedule 30.06.2017
comment
@SahanSerasinghe Я не считаю это необходимым, мне просто нужно проверить, присутствует ли значение или нет   -  person    schedule 30.06.2017
comment
Это необходимо, в зависимости от типа значения, которое вы будете проверять, например: String, Array, Number и т. Д.   -  person Sahan Serasinghe    schedule 30.06.2017
comment
это строка здесь   -  person    schedule 30.06.2017
comment
если вы используете ngIf, что необходимо для другого условия, если условие seat?.section, и в шаблоне вы должны использовать ngIf, как сказал @Fetra R   -  person mayur    schedule 30.06.2017

Ответы (1)


arrow_upward
111
arrow_downward

Прочтите здесь документ https://angular.io/guide/structural-directives специально для

<div *ngIf="hero" >{{hero.name}}</div>

Звездочка - это «синтаксический сахар» для чего-то более сложного. Внутренне Angular обессахаривает его в два этапа. Во-первых, он переводит * ngIf = "..." в атрибут шаблона, template = "ngIf ...", вот так.

<div template="ngIf hero">{{hero.name}}</div>

Затем он переводит атрибут шаблона в элемент, обернутый вокруг ведущего элемента, как это.

<ng-template [ngIf]="hero"> <div>{{hero.name}}</div></ng-template>

  • Директива * ngIf перемещена в элемент, где она стала привязкой свойства, [ngIf].
  • Остальная часть, включая его атрибут класса, переместилась внутрь элемента.

Итак, для этого у нас есть ng-container

 <ng-container *ngIf="seat.section">
    Section {{seat.section}} ,
 </ng-container>

или используйте span, div или обычный тег html.

 <span *ngIf="seat.section">
    Section {{seat.section}} ,
 </span>

или если вы все еще хотите использовать ng-template (не рекомендуется)

<ng-template [ngIf]="seat.section">
  Section {{seat.section}} ,
</ng-template>
person Fetrarij    schedule 30.06.2017
comment
ng-template - неизвестный элемент: - person ; 30.06.2017
comment
ответ @Fetra R. - это способ ответить на этот вопрос - ‹ng-container› ‹p * ngFor = let место InfoDetails? .seatInfo› ‹ng-template [ngIf] = seat.section› Раздел {{место? .section}}, ‹/ng-template› ‹ng-template [ngIf] = seat.row› Row {{seat? .row}}, ‹/ng-template› ‹ng-template [ngIf] = seat.seatNo ›Номер места {{seat? .SeatNo}} ‹/ng-template› ‹/p› ‹/ng-container› - person Rahul Singh; 30.06.2017
comment
Если ng-template не распознается, используйте шаблон, вы можете использовать более старую версию, чем angular4.0.0-rc.1 github.com/angular/angular/blob/master/CHANGELOG.md - person Fetrarij; 30.06.2017
comment
Кто-то здесь: stackoverflow.com/questions/ 47478041 / хочет знать, почему вы говорите, что не рекомендуется использовать ng-template. - person Gilles; 24.11.2017