Я не могу заставить мое угловое заявление 6 *ngIf работать

Question

Кажется, я не могу заставить работать оператор *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>

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 элемент никогда не отображается.