Angular 未显示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>

我希望

出现，但结果是什么也没有出现。这里有什么问题？

你应该做你想做的

将您的情况放在ng容器中：

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

请注意，当条件未满时，其他s将始终可见。如果您不想使用then else方法，我会将*ngIf放在组件的标记中以处理可见性，如下所示：

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