Question

我有一个奇怪的问题，Angular 2 ngIf语句只在页面上显示一瞬间然后消失。它正在工作，因为我看到了它，但它并不想留在页面上。猜猜它是某种奇怪的同步事物。这是代码：

<div class="holder">
<h2 *ngIf="!this.userHomeService.cards">
    You haven't created any cards.
</h2>
<div class="card-div" 
*ngFor="let c of this.userHomeService.cards">
    <h3 (click)="onSelect(c)">{{c.title}}</h3>
</div>

Answer 1

你没有发布你的控制器，但我猜它包含了什么。

this.userHomeService.cards未定义或为null。所以!this.userHomeService.cards是真的，“你没有创造任何牌。”显示在页面上。 ngFor不显示任何内容，因为没有任何内容可以迭代。
对某些异步请求（可能是HTTP请求）的响应返回，它是一个空数组。所以ngFor仍然没有显示任何内容，因为数组是空的，但是!this.userHomeService.cards变为false，并且消息从页面中消失。

Answer 2

您必须为第二个*ngIf="this.userHomeService.cards"添加div，以避免任何未定义值的错误。

<div *ngIf="this.userHomeService.cards">
  <div class="card-div" *ngFor="let c of this.userHomeService.cards">
    <h3 (click)="onSelect(c)">{{c.title}}</h3>
  </div>
</div>

为了避免在页面上最初显示You haven't created any cards.消息（提取数据），您必须拥有某种标志，指示您的数据仍在从服务器加载。例如：

<h2 *ngIf="this.finished && !this.userHomeService.cards">
    You haven't created any cards.
</h2>

将finished变量添加到控制器中，并在http请求完成时将其设置为true。

因此，只有在数据提取完成后才会显示此消息。

（这是你问题的可能解决方案之一，我想这是最简单的解决方案）

角度2 ngIf仅显示瞬间

2 个答案: