如何在表中找不到数据时显示"未找到结果" - Angular 8

Question

我想在过滤器时在角度 8 表中显示"未找到结果"。这是我的示例代码

fromEvent(this.searchParam.nativeElement, 'keyup')
.pipe(debounceTime(500), distinctUntilChanged())
.subscribe((event: any) => {
this.getUsers(event.target.value);
});
getUsers(searchParam: string = '') {
this.userService.getUsers(this.page, this.limit, searchParam).subscribe(
(data: any) => {
this.users = data.results;
this.loading = false;
this.totalRecords = data.totalRecords;
this.limit = data.limit;
this.totalPages = Math.ceil(this.totalRecords / this.limit);
},
(errors) => {
this.loading = true;
this.errmsg = errors.error.message;
}
);
}

<div class="form-group has-search searchbox">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" #searchParam placeholder="Search" />
</div>

提前谢谢你

Answer 1

您可以添加隐藏的div 并使用 ngIf 显示它。 在您的 html 中：

<div class='empty-result' *ngIf="empty">
No result found.
</div>

在您的 .ts 中：

empty: boolean = false;
getUsers(searchParam: string = '') {
this.userService.getUsers(this.page, this.limit, searchParam).subscribe(
if (data.length === 0) {
this.empty = true;
} else {
this.empty = false;
}
(data: any) => {
this.users = data.results;
this.loading = false;
this.totalRecords = data.totalRecords;
this.limit = data.limit;
this.totalPages = Math.ceil(this.totalRecords / this.limit);
},
(errors) => {
this.loading = true;
this.errmsg = errors.error.message;
}
);
}

您可以设置超时以在显示消息后隐藏消息。