Question

我似乎无法使* ngIf语句起作用。我想念什么吗？我在div中添加了* ngIf语句，然后在没有帖子/预订的情况下添加了

标记以显示消息。请帮助：）

<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>

Answer 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不能同时是 0 和 <= 0 ，因此p元素永远不会呈现。

我无法获取我的angular 6 * ngIf语句

1 个答案: