如果 *ngFor Let Object of Objects from HTML Binding returns an empty array 如何显示占位符
How to Show Placeholder if *ngFor Let Object of Objects from HTML Binding returns an empty array
我显示来自我在另一个组件 (team-announcements.component) 中创建的模板的数据...在主 team.component.ts 我使用选择器进行团队公告,并添加 [ announcement]="announcements" 和 ngFor="let announcement of announcements" 加载数据。如果数组 returns 没有数据 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" 并导出,然后在上面的代码中使用的方式...
团队-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();
}
}
团队-announcements.component.html
<div class="announcement-text">
{{announcement.body}}
</div>
我不确定如何或在何处"If" 检查数组长度以显示占位符。有人可以帮忙吗?
您可以插入一个 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>
编辑:更正了错误
如果你想隐藏它 和 显示其他东西你可以使用 else
属性 from *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
的元素嵌套在 [=16= 中] 与 *ngIf
。 <ng-container>
的一个好处是它实际上不会成为 DOM 的一部分,但会遵守 *ngIf
.
我显示来自我在另一个组件 (team-announcements.component) 中创建的模板的数据...在主 team.component.ts 我使用选择器进行团队公告,并添加 [ announcement]="announcements" 和 ngFor="let announcement of announcements" 加载数据。如果数组 returns 没有数据 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" 并导出,然后在上面的代码中使用的方式...
团队-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();
}
}
团队-announcements.component.html
<div class="announcement-text">
{{announcement.body}}
</div>
我不确定如何或在何处"If" 检查数组长度以显示占位符。有人可以帮忙吗?
您可以插入一个 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>
编辑:更正了错误
如果你想隐藏它 和 显示其他东西你可以使用 else
属性 from *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
的元素嵌套在 [=16= 中] 与 *ngIf
。 <ng-container>
的一个好处是它实际上不会成为 DOM 的一部分,但会遵守 *ngIf
.