как отфильтровать данные на основе входных данных с использованием angular2 - PullRequest
Новая
       10

как отфильтровать данные на основе входных данных с использованием angular2

0 голосов
/ 30 апреля 2018

enter image description here

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

HTML: 

<mat-tab label="Active">
      <mat-icon for="search">search</mat-icon>
      <input type="search" [(ngModel)]="filter" name="search" class="search" placeholder="Company">
      <ul>
        <li *ngFor="let message of activeMessages| messagefilter: filter" (click)="showMessage(message)" [class.activeShow]="message.id == message_id">
          <span>{{message.messages[message.messages.length -1].updated_at  | date:'dd.MM.yyyy'}}</span>
          <img style="width: 40px;" [src]="message.from_user_image || '../assets/images/msg.png'"/>
          <p style="padding-top: 16px;display: inline;">{{message.from_user_name}}</p>
          <p style="padding-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><b>{{message.messages[message.messages.length -1].text}}</b></p>
        </li>
      </ul>
    </mat-tab>

Pipe.ts: 

    /* Package filter to write filter functions for Package*/
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'messagefilter',
  pure: false
})

export class MessagePipe implements PipeTransform {
  transform(items, filter) {
    console.log(items);
    console.log(filter);
    if (!items || !filter) {
      return items;
    }
    return items.filter((item) => this.applyFilter(item, filter));
  }
  /* Function to apply filter for Messages */
  applyFilter(user, filter): boolean { 
    if (filter && filter != user.from_user_name) { 
        return false;
    }  
    // if the user passes all the filters, show it
    return true; 
  }
}

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

Ответы [ 2 ]

0 голосов
/ 30 апреля 2018

Ваш filter logic кажется неправильным,

Измените логику на, 

if (filter == user.from_user_name) { 
    return true; 
} else{ 
    return false; 
}

Ваша труба становится: 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'messagefilter',
  pure: false
})

export class MessagePipe implements PipeTransform {
  transform(items, filter) {
    console.log(items);
    console.log(filter);
    if (!items || !filter) {
      return items;
    }
    return items.filter((item) => this.applyFilter(item, filter));
  }
  /* Function to apply filter for Messages */
  applyFilter(user, filter): boolean { 
    if (filter == user.from_user_name) { 
        return true; 
    } else{ 
        return false; 
    }
  }
}
0 голосов
/ 30 апреля 2018

В Angular (по сравнению с AngularJ) не рекомендуется использовать Pipes для фильтрации или изменения данных. Их следует использовать только для форматирования внешнего вида существующих данных (за редким исключением).

У вас уже есть значение фильтра в модели, поэтому вы можете создать другое свойство, которое будет использовать его и возвращать отфильтрованный список, у вас уже есть что-то подобное в конвейере: 

filteredMessages = items.filter((item) => this.applyFilter(item, filter));

А затем используйте это в шаблоне: 

<tr *nfFor = "let d in filteredMessages">
...