Angular 2 ngIf只显示一秒

我有一个奇怪的问题，Angular 2 ngIf语句只在页面上显示一秒钟然后消失。这是因为我看到它，但它不想留在页面上。猜测这是某种奇怪的同步事物。下面的代码：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>

来源

2016-11-06 Linx

了'ngIf'没有停止下一条语句中，'ngFor'，被显示。你看到来自'ngFor'语句关于'this.userHomeService.cards'为'undefined'的控制台错误吗？ – Claies

它看起来好像没有显示出来。如果我添加一张卡，那么会出现，否则没有任何内容。我没有得到任何控制台错误 – Linx

你不发表您的控制器，但我能猜到它包含什么。

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

来源

2016-11-06 22:24:25

您必须为第二个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。

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

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

来源

2016-11-06 22:33:42 phts

真的可以在同一个元素中使用'* ngIf'和'* ngFor'吗？我不这么认为。 – developer033

@Claies，好吧，我现在只是在相同的元素**上测试它**以及我如何怀疑它会抛出一个错误：'不能在一个元素上有多个模板绑定。只能使用一个名为'template'的属性或使用*'前缀。 – developer033

@ developer033在这种情况下只使用嵌套元素（更新的答案） – phts

Angular 2 ngIf只显示一秒

回答

相关问题