html - 如果 *ngFor 让 HTML 绑定中的对象的对象返回一个空数组,如何显示占位符
问题描述
我显示来自我在另一个组件(team-announcements.component)中创建的模板的数据......在主team.component.ts中我使用选择器进行团队公告,并添加 [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'
})
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>
我不确定如何或在何处“如果”检查数组长度以显示占位符。任何人都可以帮忙吗?
解决方案
如果您想隐藏它并显示其他内容,则可以使用以下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>
当您希望元素 with*ngFor
依赖于条件 ( *ngIf
) 时,一个不错的选择是将带有 a 的元素嵌套*ngFor
在 a<ng-container>
中*ngIf
。一件好事<ng-container>
是它实际上不会成为 DOM 的一部分,但会遵守*ngIf
.
推荐阅读
- jenkins - 构建失败时是否可以关闭Jenkins的gitlab合并请求
- asp.net-mvc - 间歇性地得到“无法创建 SSL/TLS 安全通道”,当前的解决方法是重新启动 Web 服务器
- javascript - 在角度组件中操作复选框道具
- arrays - 类型 [Node] 不符合 Swift 4.0 中的“Equatable”?
- spring-boot - spring-batch 读取包含要摄取的文件名的文件
- php - 数组中的 foreach 没有像 [0] 这样的键 ->
- java - 在android中迁移房间数据库
- python - Pandas:保存一个类别独有的行
- django - 由于验证器,Django 1.8 makemigrations 每次都会生成重复的迁移
- javascript - 无法挂载组件:使用 vue-c3