小编BPe*_*z95的帖子

我显示在另一个组件 (team-announcements.component) 中创建的模板中的数据...在主 team.component.ts 中，我使用 team-announcements 选择器，并添加 [announcement]="announcements" 和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-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'
}) …