angular - 我无法让我的 Angular 6 *ngIf 语句工作
问题描述
我似乎无法让 *ngIf 语句起作用。我错过了什么吗?我已将 *ngIf 语句包含在 div 中,然后添加了
如果没有任何帖子/预订,则显示消息的标签。请帮忙 :)
<div class="container">
<div class="row">
<div class="col-6">
<h4>Bookings</h4>
</div>
<span class="col-6">
<button
class="btn btn-primary float-right btn-sm"
routerLinkActive="active"
routerLink="/createBooking">
New Booking</button>
</span>
</div>
<hr>
<div class="row" *ngIf="bookings.length > 0">
<div class="col-12">
<a
href="#"
class="list-group-item clearfix"
*ngFor="let booking of bookings">
<div class="float-left">
<p class="list-group-item-text"
>{{ booking.bookingDate }}
<br>
{{ booking.clientName }}
<br>
{{ booking.projectTitle }}
<br>
${{ booking.rate }}
</div>
</a>
</div>
<p *ngIf="bookings.length <= 0">No bookings added yet!</p>
</div>
</div>
解决方案
你有一个*ngIf
看起来像这样的:
<div class="row" *ngIf="bookings.length > 0">
在 this 内部div
,您有一个*ngIf
如下所示的嵌套:
<p *ngIf="bookings.length <= 0">No bookings added yet!</p>
现在,想象一下您所拥有的以下简化版本:
<div class="row" *ngIf="bookings.length > 0">
<p *ngIf="bookings.length <= 0">No bookings added yet!</p>
</div>
当你看这个时,很明显当bookings.length
is not时> 0
,顶层div
不会被渲染。如果顶层div
没有被渲染,它的子元素p
不可能被渲染,因为它在一个没有被渲染的内部:div
不能bookings.length
同时是 > 0和<= 0,所以p
元素永远不会被渲染。
推荐阅读
- c++ - [cpp.pre]/7 中的措辞与其示例之间是否有任何关系?
- scala - 无法使用 WholeTextFiles 方法使用 Spark 读取位于 Unix 文件系统上的文件
- c# - WPF 数据绑定在初始化后不起作用。没有绑定错误
- xml - 为什么 Eclipse 认为我的 XML 语法有误?
- javafx - 如何使用 javaFX 绘制五边形
- c - 删除 main 中的 int 后,BST 代码停止工作
- javascript - 为什么我的 VUE 数组元素没有渲染,
- node.js - 调试 Slack WebHook
- linear-programming - PySCIPOpt 中的文件名解析逻辑
- python - 将嵌套的 json 转换为具有特定输出的数据框