时间戳

首页 > 解决方案 > Angular - 如何在没有结果时显示单个“无结果”消息

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

问题描述

我很难想出一种方法来显示我的“无结果”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>

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

我的订单列表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>

我在部分组件中的过滤方法：

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 元素“未找到结果”信息？

先感谢您。

标签： htmlangulartypescript

解决方案

您可以轻松地从 HTML 中的角度使用*ngIf;else 指向 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，您将设置为 ，true或者false在您的方法结束时filterSectionOrders，基于filterSectionOrders.length。*ngIf然后，您将在check 中使用这个新变量，而不是filterSectionOrders.length > 0.

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

推荐阅读