Angular 6如何检查管道过滤器是否返回空数组

我有一个恐龙的列表，我在其中迭代，然后我添加了一个搜索输入，通过登录属性过滤列表，如下所示

<input type="text" class="recherche" [(ngModel)]="loginToSearch" placeholder="Entrez votre recherche ici...">

    <li *ngFor="let dinosaure of dinosauresList | filter: login : loginToSearch" class="list-group-item text-left">
      <div>
        <img class="img-thumbnail" src="{{ dinosaure.profileImage}}">
        <label class="name">
          {{dinosaure.login}}<br>
        </label>
      </div>
      <div class="btn-plus">
        <label class="pull-right">
          <a class="btn btn-success btn-xs glyphicon glyphicon-plus" 
                 (click)="onClickAddFriend(dinosaure)"
            title="View"></a>
        </label>
      </div>

    </li>

<input type="text" class="recherche" [(ngModel)]="loginToSearch" placeholder="Entrez votre recherche ici..."  (ngModelChange)="onFilterValueChange()" >

---

我建议你改变工作方式

您可以在

（ngModelChange）

前面添加一个ng

所以你的输入是这样的

<input type="text" class="recherche" [(ngModel)]="loginToSearch" placeholder="Entrez votre recherche ici...">

    <li *ngFor="let dinosaure of dinosauresList | filter: login : loginToSearch" class="list-group-item text-left">
      <div>
        <img class="img-thumbnail" src="{{ dinosaure.profileImage}}">
        <label class="name">
          {{dinosaure.login}}<br>
        </label>
      </div>
      <div class="btn-plus">
        <label class="pull-right">
          <a class="btn btn-success btn-xs glyphicon glyphicon-plus" 
                 (click)="onClickAddFriend(dinosaure)"
            title="View"></a>
        </label>
      </div>

    </li>

<input type="text" class="recherche" [(ngModel)]="loginToSearch" placeholder="Entrez votre recherche ici..."  (ngModelChange)="onFilterValueChange()" >

然后在你的html中你可以

<div *ngIf="temporaryList  === 0;else results"> Your error message  </div>

<ng-template #results>
    <li *ngFor="let dinosaure of temporaryList " class="list-group-item text-left">
      <div>
        <img class="img-thumbnail" src="{{ dinosaure.profileImage}}">
        <label class="name">
          {{dinosaure.login}}<br>
        </label>
      </div>
      <div class="btn-plus">
        <label class="pull-right">
          <a class="btn btn-success btn-xs glyphicon glyphicon-plus" 
                 (click)="onClickAddFriend(dinosaure)"
            title="View"></a>
        </label>
      </div>

    </li>

</ng-template>

您的错误消息

{{degonale.login}}

---

如果您坚持使用管道，您必须创建一个

服务

，其中包含一个

事件发射器

，当列表为空时通知您的组件，如果您创建stackblitz，我将能够为您提供更多帮助

我建议您改变工作方式

您可以在

（ngModelChange）

前面添加一个ng

所以你的输入是这样的

<input type="text" class="recherche" [(ngModel)]="loginToSearch" placeholder="Entrez votre recherche ici...">

    <li *ngFor="let dinosaure of dinosauresList | filter: login : loginToSearch" class="list-group-item text-left">
      <div>
        <img class="img-thumbnail" src="{{ dinosaure.profileImage}}">
        <label class="name">
          {{dinosaure.login}}<br>
        </label>
      </div>
      <div class="btn-plus">
        <label class="pull-right">
          <a class="btn btn-success btn-xs glyphicon glyphicon-plus" 
                 (click)="onClickAddFriend(dinosaure)"
            title="View"></a>
        </label>
      </div>

    </li>

<input type="text" class="recherche" [(ngModel)]="loginToSearch" placeholder="Entrez votre recherche ici..."  (ngModelChange)="onFilterValueChange()" >

然后在你的html中你可以

<div *ngIf="temporaryList  === 0;else results"> Your error message  </div>

<ng-template #results>
    <li *ngFor="let dinosaure of temporaryList " class="list-group-item text-left">
      <div>
        <img class="img-thumbnail" src="{{ dinosaure.profileImage}}">
        <label class="name">
          {{dinosaure.login}}<br>
        </label>
      </div>
      <div class="btn-plus">
        <label class="pull-right">
          <a class="btn btn-success btn-xs glyphicon glyphicon-plus" 
                 (click)="onClickAddFriend(dinosaure)"
            title="View"></a>
        </label>
      </div>

    </li>

</ng-template>

您的错误消息

{{degonale.login}}

---

如果您坚持使用管道，则必须创建一个

服务

，其中包含一个

事件发射器

，当列表为空时通知组件，如果你创建一个stackblitz，我可以给你更多的帮助

为什么你不把你的

包在一个*ngIf？@BELLIL我没有找到合适的条件放入*ngIf，这就是为什么你应该使用过滤器或排序管道的原因。官方的angular文档建议不要这样做。你为什么不把你的

包在*ngIf中？@BELLIL我没有找到合适的条件放在*ngIf中，这就是为什么你应该使用过滤器或分拣管的原因。官方文件建议避免这样做。我和你的想法一样！但我认为当我从输入中删除时仍然存在问题，它不会恢复阵列，并且我尝试查找一个元素，但当我删除并查找另一个现有元素时，它将不起作用，它会显示错误消息，因为输入是空的，但我从未使用stackblitz，但如果您愿意，我可以给您一个github存储库只是前端部分你能看看我修改过的代码吗？我在onFilterValueChange（）中添加了一个条件，如果LoginSearch为空，您应该重新初始化。我的想法与您相同！但我认为当我从输入中删除时仍然存在问题，它不会恢复阵列，并且我尝试查找一个元素，但当我删除并查找另一个现有元素时，它将不起作用，它会显示错误消息，因为输入是空的，但我从未使用stackblitz，但如果您愿意，我可以给您一个github存储库只是前端部分你能看看我修改过的代码吗？我在onFilterValueChange（）中添加了一个条件，如果LoginSearch为空，则应重新初始化