ngIf 不使用 ng-template答案

【问题标题】：ngIf not working with ng-templatengIf 不使用 ng-template
【发布时间】：2021-08-08 23:35:58
【问题描述】：

我想根据 Angular 4 中的布尔值显示或隐藏模板。下面是 HTML 和代码

--- 这是在 Home.Component.HTML 中

<ng-template [ngIf]="isSummaryViewVisbile" #pricebookView ></ng-template>

---- 这是在 HomeComponent 里面

   isSummaryViewVisbile: boolean = true;

上面的代码不起作用，它总是隐藏模板，尽管我分配的是 true。

提前致谢。

【问题讨论】：

【解决方案1】：

ng-template 是一个用于渲染 HTML 的 Angular 元素。它永远不会直接显示。事实上，在渲染视图之前，Angular 会用注释替换和它的内容。如果没有结构指令并且你只是将一些元素包装在一个 ng-template 中，这些元素就会消失。

<p>Hip!</p>
<ng-template>
  <p>Hip!</p> //would disappear
</ng-template>
<p>Hooray!</p>

所以下面的代码可以正常工作

isSummaryViewVisbile = true;

<ng-template [ngIf]="isSummaryViewVisbile" #pricebookView >
       Hello world.
</ng-template>

但是如果将 [ngIf] 替换为 *ngIf，则相同的代码将不起作用。

因为在内部，Angular 将 *ngIf 属性转换为 ng-template 元素，包裹在宿主元素周围。例如

<ng-template *ngIf="isSummaryViewVisbile" #pricebookView >
       Hello world.
</ng-template>

将转换为-

<ng-template [ngIf]="isSummaryViewVisbile">
      <ng-template #pricebookView >
           Hello world.
    </ng-template>
</ng-template>

现在我们可以看到，内部 ng-template 将始终隐藏它的内容。我希望这清楚。

【讨论】：

【解决方案2】：

根据 Mohit 的回答/评论，您的代码是有效的...如果您要将内容分配给它应该显示的 ng-template 标记。

【讨论】：