Question

我在Angular 5中创建了一个示例应用程序。我有两个组件，分别称为 app-parent 和 app-child ，并且每个示例文本。我的App组件中有一个变量，我需要一次显示每个由变量值触发的组件。

这是代码。

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>出现，但结果是什么也没有出现。这是什么问题？

Answer 1

https://stackblitz.com/edit/angular-zafvpx?file=src%2Fapp%2Fapp.component.html 应该做你想要的。

将您的病情放在ng-container中

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

请注意，当条件未满足时， else 将始终可见。如果您不希望采用then-else方法，则可以将* ngIf放置在组件的标签中以处理可见性，例如：

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

ngIf未显示组件

1 个答案: