Компоненты не отображаются для ngif

Я создал образец приложения на Angular 5. У меня есть два компонента, которые называются приложение-родитель и приложение-ребенок, и в каждом есть образец текста. У меня есть переменная в моем компоненте приложения, и мне нужно отображать указанные выше компоненты, каждый раз, запускаемый значением переменной.

Это код.

App.component.ts

export class AppComponent {
  val:string;
}

App.component.html:

<div *ngIf="!val; then r; else s">
    <ng-template #r>
        <app-parent></app-parent>
    </ng-template>
    <ng-template #s>
        <app-child></app-child>
    </ng-template>
</div>

Ожидаю, что появится <app-parent>, но в результате ничего не появляется. В чем проблема?

0
0
1 336
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

https://stackblitz.com/edit/angular-zafvpx?file=src%2Fapp%2Fapp.component.html должен делать то, что хочешь.

Поместите свое условие в ng-контейнер:

<ng-container *ngIf="val == 'r' && val.length > 0; then r; else s" ></ng-container>

Обратите внимание, что еще с будет всегда виден, когда условие не выполнено. Если вы не хотите использовать подход then-else, я бы поместил * ngIf в теги компонентов для обработки видимости, например:

<app-parent *ngIf="val == 'r'"></app-parent>
<app-child *ngIf="val == 's'></app-child>

Другие вопросы по теме