如果HTML绑定中对象的*ngFor Let对象返回空数组，如何显示占位符

我显示在另一个组件（team announcements.component）中创建的模板中的数据。。。在主team.component.ts中，我使用团队公告选择器，并添加[announcement]=“announcements”和ngFor=“let announcement of announcements”以加载数据。如果阵列没有返回任何数据，即没有公告，我如何显示“无公告”之类的占位符

这是我在team.component.html中加载公告的地方。数据通过API服务提供，并在“team.component.ts”中检索，下面是相关对象的HTML

team.component.ts（获取公告功能）：

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>

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

今日讯息

这就是如何将上面的“应用程序团队公告”模板化到单独的文件“team announcement.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();
  }

}

从'@angular/core'导入{Component，EventEmitter，Input，Output，OnInit，OnDestroy}；
从“../core”导入{Team，Announcement，User，UserService}；
从“rxjs”导入{Subscription}；
@组成部分({
选择器：“应用程序团队公告”，
templateUrl:“./team announcement.component.html”
})
导出类TeamAnnouncementComponent实现OnInit、OnDestroy{
建造师(
私有用户服务：用户服务
) {}
私人认购：认购；
@输入（）公告：公告；
@Output（）deleteAnnouncement=neweventEmitter（）；
canModify：布尔型；
恩戈尼尼特（）{
//加载当前用户的数据
this.subscription=this.userService.currentUser.subscripte(
（userData:User）=>{
this.canModify=（userData.username==this.announcement.author.username）；
}
);
}
恩贡德斯特罗（）{
this.subscription.unsubscripte（）；
}
}

team-announcements.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>

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

{{公告.正文}

---

我不确定如何或在何处“如果”检查数组长度以显示占位符。有人能帮忙吗？

您可以插入一个div，该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>

今日讯息
没有公告

---

编辑：更正错误

如果您想隐藏它并显示其他内容，您可以使用

*ngIf

中的

else

属性：

<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

的元素嵌套在具有

*ngIf

的

中。

的一个好处是，它实际上不是DOM的一部分，但会遵守

*ngIf

这是有效的！我必须将它包含在一个ng容器中，但我没有，我在*ngFor下面添加了一个，它没有执行。在那之后，我将*ngIf放在*ngFor之前，这显然是一个错误，因为公告还没有创建+1.