Angular 如何在搜索无匹配结果时显示统一的“无结果”提示

你可以通过父子组件通信累加全局匹配订单数，或者把过滤逻辑抽成公共方法在父层统计，两种实现方案如下：

方案1：子组件抛事件，父组件累加统计（无需改动现有过滤逻辑） #

第一步：修改分区子组件（orders-list-section.component.ts） #

新增@Output事件，每次过滤完成后将当前分区的匹配订单数发送给父组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';

// ... 现有代码
@Output() matchCountChange = new EventEmitter<number>();

filterSectionOrders(searchString: string){
    if(!searchString) {
        // 无搜索词时默认展示当前分区所有订单，返回全量长度
        this.matchCountChange.emit(this.filteredSectionOrders.length);
        return;
    }
    if(this.hasNumbers(searchString)){
        this.filteredSectionOrders = this.filteredSectionOrders.filter(order => order.order_num.toString().indexOf(searchString) !== -1);
    } else {
        this.filteredSectionOrders = this.filteredSectionOrders.filter(order => {
            if(order.first_name && order.last_name){
                let fullName = order.first_name + " " + order.last_name;
                return fullName.toLowerCase().indexOf(searchString.toLowerCase()) !== -1;
            }
            return false;
        })
    }
    // 过滤完成后发送当前分区匹配数
    this.matchCountChange.emit(this.filteredSectionOrders.length);
}

// 组件初始化、orders输入变更时触发事件发送初始长度
ngOnInit() {
    this.matchCountChange.emit(this.filteredSectionOrders.length);
}

第二步：修改列表父组件（orders-list.component.ts） #

新增全局匹配数统计变量，监听子组件事件累加数值，每次搜索词变更时重置统计值：

// ... 现有代码
totalMatchCount: number = 0;

// 监听搜索词变化，每次搜索前重置统计数
onSearchTermChange(newTerm: string) {
    this.totalMatchCount = 0;
    this.searchTerm = newTerm;
}

// 接收子组件上报的匹配数累加
onSectionMatchCount(count: number) {
    this.totalMatchCount += count;
}

第三步：修改父组件模板 #

绑定子组件事件，给无结果提示加显示判断：

<div class="list-container" [ngClass]="{section: isDeliverySlotsActive === false}">
    <label class="list-header" *ngIf="isDeliverySlotsActive === true" style="margin-top: 1.625rem">DELIVERY SLOTS ORDERS</label>
    <div [ngClass]="{section: isDeliverySlotsActive === true}" *ngFor="let date of timelines">
        <app-orders-list-section
            [orders]="orders"
            [timeline]="date"
            [isDeliverySlotsActive]="isDeliverySlotsActive"
            [searchTerm]="searchTerm"
            (matchCountChange)="onSectionMatchCount($event)"
        ></app-orders-list-section>
    </div>
</div>
<!-- 全局匹配数为0时显示无结果 -->
<div id="no-results" *ngIf="totalMatchCount === 0">
    <img src="../../../assets/my-orders/no-results.png" alt="No Results" style="margin-top: 6.063rem; margin-bottom: 2.837rem;">
    <label class="no-results-text">COULDN'T FIND ANYTHING</label>
    <label class="no-results-text weight-medium">Search by order number or customer</label>
</div>

方案2：抽离公共过滤逻辑（更易维护） #

把过滤逻辑抽成公共工具方法/服务，父组件直接全局统计所有匹配订单数，无需依赖子组件通信：

第一步：新增公共过滤方法 #

可以放在公共service或者直接在父组件定义，规则和子组件内的过滤逻辑保持一致即可：

// 公用过滤逻辑
filterOrders(orders: any[], searchString: string) {
    if(!searchString) return orders;
    if(this.hasNumbers(searchString)){
        return orders.filter(order => order.order_num.toString().indexOf(searchString) !== -1);
    } else {
        return orders.filter(order => {
            if(order.first_name && order.last_name){
                let fullName = order.first_name + " " + order.last_name;
                return fullName.toLowerCase().indexOf(searchString.toLowerCase()) !== -1;
            }
            return false;
        })
    }
}

第二步：父组件统计全局匹配数 #

每次搜索词变化时直接计算总匹配数：

totalMatchCount: number = 0;

onSearchTermChange(newTerm: string) {
    this.searchTerm = newTerm;
    // 全局统计所有匹配订单数
    const allMatched = this.filterOrders(this.allOrders, newTerm);
    this.totalMatchCount = allMatched.length;
}

模板修改逻辑和方案1一致，无结果提示绑定*ngIf="totalMatchCount === 0"即可。

内容的提问来源于stack exchange，提问作者Manuel Brás