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

Posted 2023-03-13

【中文标题】如果 *ngFor 让 HTML 绑定中的对象的对象返回一个空数组，如何显示占位符

【英文标题】：How to Show Placeholder if *ngFor Let Object of Objects from HTML Binding returns an empty array

【发布时间】：2019-09-21 15:19:15

【问题描述】：

我显示来自我在另一个组件 (team-announcements.component) 中创建的模板的数据...在主 team.component.ts 我使用选择器进行团队公告，并添加 [announcement]="公告”和 ngFor="让公告的公告" 加载数据。如果数组没有返回数据 IE 没有公告，如何显示类似“No Announcements”的占位符？

这是我在 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-announcement.component.html”中并导出，然后在上面的代码中使用......

团队公告.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();
  

团队公告.component.html

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

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

【参考方案1】：

如果您想隐藏它并显示其他内容，您可以使用*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 的元素嵌套在带有<ng-container> 的*ngIf 中。 <ng-container> 的一个好处是它实际上不会成为 DOM 的一部分，但会服从 *ngIf。

【讨论】：

这成功了！我必须将它包含在我没有的 ng-container 中，我在 *ngFor 下添加了一个 并且它没有执行。之后，我将 *ngIf 放在 *ngFor 之前，这显然是错误的，因为尚未创建公告。 +1

【参考方案2】：

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

编辑：更正错误