Angular 6 как проверить, возвращает ли мой фильтр канала пустой массив - PullRequest
Новая
       16

Angular 6 как проверить, возвращает ли мой фильтр канала пустой массив

0 голосов
/ 26 февраля 2020

У меня есть список динозавров, которые я перебираю по нему, а затем я добавил поисковый запрос, чтобы отфильтровать список по свойству входа, как это 

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

, но я хочу добавить условие для отображения сообщения или, когда фильтр не возвращает никаких результатов, я пробовал много решений, которые нашел, но ни одно из них не помогло мне.

это мой фильтр: 

   @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);
                 });

                }

             }

1 Ответ

2 голосов
/ 26 февраля 2020

Я бы порекомендовал вам изменить способ работы,

вы можете добавить нг на (ngModelChange) на ваш фронт

, чтобы ваш ввод был таким 

<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, который будет информировать ваш компонент, когда ваш список пуст, если вы создадите стек стека, я смогу оказать вам дополнительную помощь

...