Angular 6 如何检查我的管道过滤器 returns 是否为空数组

Question

我有一个恐龙列表，我对其进行了迭代，然后我添加了一个搜索输入以通过登录属性过滤列表，就像这样

<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>

但我想添加条件以在过滤器没有返回结果时显示消息或表单，我尝试了很多我找到的解决方案，但 none 对我有用。

这是我的过滤器：

   @Pipe({
     name: 'filter'
  })
export class FilterPipe implements PipeTransform {

      transform(value: any, args: any, loginToSearch: string): any {
        if (!value) {

         return null;
         }
      if (!args && !loginToSearch) {
              return value;
             }
         loginToSearch = loginToSearch.toString().toLowerCase();
             return value.filter(data => {
           return data.login.includes(loginToSearch);
                 });

                }

             }

Answer 1

我会建议你改变工作方式，

你可以在 (ngModelChange) 上添加一个 ng 到你的前面

所以你的输入会像这样

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

然后在您的组件中声明一个临时列表并搜索您的值

temporaryList = [];
onFilterValueChange(){
        if(this.loginToSearch){
         this.temporaryList = this.dinosauresList.filter(data => data.login.includes(this.loginToSearch));} 
         else {  this.temporaryList  = this.dinosauresList;
        }}

然后在你的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>

如果你坚持使用你的管道，你必须创建一个 service，其中包含一个 event emitter，当你的列表为空时通知你的组件，如果你创建一个 stackblitz i将能够给你更多的帮助

Angular 6 如何检查我的管道过滤器 returns 是否为空数组

Angular 6 how to check if my pipe filter returns an empty array

angular

pipe

ngfor