我无法让我的 Angular 6 *ngIf 语句工作答案

【问题标题】：I can't get my angular 6 *ngIf statement to work我无法让我的 Angular 6 *ngIf 语句工作
【发布时间】：2018-10-29 21:47:18
【问题描述】：

我似乎无法让 *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>

【问题讨论】：

发布你的 ts 文件，bookings 是什么样的？那是如何获取数据的……等等。

标签： angular angular-ng-if

【解决方案1】：

您的*ngIf 如下所示：

<div class="row" *ngIf="bookings.length > 0">

在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 不是> 0 时，顶级div 将不会被渲染。如果顶层div 没有被渲染，它的子p 不可能被渲染，因为它在一个没有被渲染的div 的内部：bookings.length 不能被both > 0 和，所以p元素永远不会被渲染。

【讨论】：