Как показать заполнитель, если * ngFor Позволяет объекту объектов из HTML-привязки возвращать пустой массив

Question

Я отображаю данные из шаблона, который я создаю в другом компоненте (team-announcements.component) ... в основном team.component.ts Я использую селектор для командных объявлений и добавляю [объявление] = "анонсы "и ngFor =" пусть анонс анонсов "для загрузки данных.Если массив не возвращает данных, то IE нет объявлений, как я могу отобразить заполнитель, такой как «Без объявлений»?

Здесь я загружаю объявления в team.component.html.Данные обслуживаются через службу API и извлекаются в «team.component.ts», HTML-код для рассматриваемых объектов приведен ниже.

team.component.ts (получить функции объявления):

  getAnnouncements() {
    this.teamsService.getTeamAnnouncements(this.team.slug)
      .subscribe(announcements => this.announcements = announcements);
      console.log("announcements", this.announcements);
  }

team.component.html

<div class="team-announcement">
     <div class="announcement-title">Message of the Day</div>
     <app-team-announcements
        [announcement]="announcement"
         *ngFor="let announcement of announcements">
      </app-team-announcements>
   </div>

Так вышеприведенные «app-team-announcements» создаются в отдельном файле «team-announce.component.html» и экспортируютсяи затем используется в указанном выше коде ...

team-announcements.component.ts

import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';

import { Team, Announcement, User, UserService } from '../core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-team-announcements',
  templateUrl: './team-announcement.component.html'
})
export class TeamAnnouncementComponent implements OnInit, OnDestroy {
  constructor(
    private userService: UserService
  ) {}

  private subscription: Subscription;

  @Input() announcement: Announcement;
  @Output() deleteAnnouncement = new EventEmitter<boolean>();

  canModify: boolean;

  ngOnInit() {
    // Load the current user's data
    this.subscription = this.userService.currentUser.subscribe(
        (userData: User) => {
          this.canModify = (userData.username === this.announcement.author.username);
        }
      );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

team-announcements.component.html

<div class="announcement-text">
    {{announcement.body}}
</div>

IЯ не уверен, как или где «Если» проверить длину массива для отображения заполнителя.Кто-нибудь может помочь?

Answer 1

Если вы хотите скрыть это, и отображают что-то другое, вместо этого вы можете использовать свойство else из *ngIf:

<div class="team-announcement">
  <div class="announcement-title">Message of the Day</div>
  <ng-container *ngIf="announcements.length != 0; else emptyArray">
    <app-team-announcements
      [announcement]="announcement"
      *ngFor="let announcement of announcements">
    </app-team-announcements>
  </ng-container>
</div>
<ng-template #emptyArray>No announcements...</ng-template>

Если вы хотите, чтобы элемент с *ngFor зависел от условия (*ngIf), хорошей альтернативой является вложение элемента с *ngFor в <ng-container> с *ngIf. Хорошая вещь о <ng-container> заключается в том, что она на самом деле не будет частью DOM, но будет подчиняться *ngIf.

Answer 2

Вы можете вставить div, который отображается, только если ваш массив пуст:

<div class="team-announcement">
 <div class="announcement-title">Message of the Day</div>
 <app-team-announcements
    [announcement]="announcement"
     *ngFor="let announcement of announcements">
 </app-team-announcements>
 <div *ngIf="announcements.length===0"> No announcements </div>
</div>

Редактировать: Исправлены ошибки