Angular - 如何在没有结果时显示单个“无结果”消息

Question

我无法想出一种方法来显示我的“无结果”div 元素。基本上，我有一个包含订单时间线部分组件的列表组件，每个部分都包含订单组件。像这样：

我的 orders-list.component.html（检查底部 div）：

<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"
        ></app-orders-list-section>
    </div>
</div>
/* I want to show the below div when there are no results for the search */
<div id="no-results">
    <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>

对于每个部分，当用户使用搜索栏搜索订单时，都会应用一种过滤方法。如果搜索词与部分中的订单不对应，则不会显示该部分的订单。如果该部分没有结果，则也不会显示部分标题。

我的orders-list-section.component.html：

<div *ngIf="filteredSectionOrders.length > 0">
    <label
        *ngIf="isDeliverySlotsActive === true"
        [ngClass]="{ slots: isDeliverySlotsActive === true }">
    {{ timeline | addSectionDateFormat }}
    </label>
</div>
<div *ngFor="let order of filteredSectionOrders">
    <app-orders-list-item
        [order]="order"
        [timeline]="timeline"
    ></app-orders-list-item>
</div>

我在section组件中的过滤方法：

filterSectionOrders(searchString: string){
    if(!searchString) 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;
                if(fullName.toLowerCase().indexOf(searchString.toLowerCase()) !== -1){
                    return order;
                }
            }
        })
    }
}

鉴于我将此过滤器应用于每个部分而不是整个列表，我如何找出总结果为 0 的时间，以便我可以只显示一个（不是每个部分) 带有“未找到结果”消息的 div 元素？

提前谢谢你。

Answer 1

您可以轻松地在 HTML 中从角度使用 *ngIf;else link to ngIf

我不确定你在哪里使用filteredSectionOrders，因为它没有显示在你的html中，但我们假设你的app-orders-list-section有一些HTML逻辑，你使用*ngFor循环订单并正确显示它

所以，我猜你的代码看起来像这样

<div class="order" *ngFor="let order of filteredSectionOrders">
  <img/>
  <p>
    {{ order.first_name + ' ' + order.last_name }}
  </p>
</div>

这是我认为的简化的 html。

接下来你能做什么：

<ng-template *ngIf="filteredSectionOrders.length > 0; else noResultsBlock">
  // here you insert your code to render orders
  <div class="order" *ngFor="let order of filteredSectionOrders">
    <img/>
    <p>
      {{ order.first_name + ' ' + order.last_name }}
    </p>
  </div>
</ng-template>
<ng-template #noResultsBlock>
  <p> No results </p>
</ng-template>

所以，这将是简单的解决方案 如果您想进一步改进它，最好有一个新变量，比如说areThereResults，您将在方法filterSectionOrders 的末尾将其设置为true 或false，基于filterSectionOrders.length。然后，您将在 *ngIf 检查中使用这个新变量，而不是 filterSectionOrders.length > 0。

使用boolean 变量而不是使用实际数组的原因是检测更改，并且将在*ngIf 中重新渲染UI。您可以在 Angular 文档中阅读更多相关信息，只需搜索检测更改即可。