Как редактировать angular фильтр материаловПрогнозировать правильный путь? - PullRequest
Новая
       5

Как редактировать angular фильтр материаловПрогнозировать правильный путь?

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

Поскольку я не смог найти много примеров в inte rnet, которые объясняют, как правильно перезаписать фильтр. Предикат, я решил спросить здесь. У меня есть таблица, полная телефонных номеров с различными состояниями, как вы можете видеть на фотографии.

enter image description here

Фильтрация работает, но есть небольшая ошибка Я не знаю, как исправить. Когда я выбираю «ASSIGNED», результаты для «UNASSIGNED» и «ASSIGNED» будут показаны мне. «UNASSIGNED», потому что он содержит «ASSIGNED».

Итак, я понял, что мне нужно перезаписать filterPredicate. Я пробовал это несколько раз, но не совсем понимаю синтаксис. Можете ли вы помочь мне, что мне нужно сделать?

Это html (только необходимая часть): 

<table mat-table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="telefonnummer">
      <th mat-header-cell *matHeaderCellDef> Telefonnummer </th>
      <td mat-cell *matCellDef="let element"> {{element.areaCode.prefix}}-{{element.areaCode.base}}- 
   {{element.extension}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef> Status </th>
      <td mat-cell *matCellDef="let element"> {{element.phoneNumberType}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

Это мой класс TS (только необходимые части): 

displayedColumns: string[] = ['telefonnummer', 'status'];

products = [];

dataSource = new MatTableDataSource<any>(this.products);

constructor(private httpClient: HttpClient) {
    this.getAllNumbers();
}

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

ngOnInit() {
    this.dataSource.paginator = this.paginator;

    this.dataSource.filterPredicate = (data: any, filter: string) => {
      let matchFound = false;
      if (data === filter) {
          matchFound = true;
      }
  return matchFound;
};
}

Спасибо за любую помощь!

1 Ответ

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

Фильтрация по строкам assigned и unassigned в этом случае выглядит неправильно. Если ваша таблица получит больше столбцов, и пользователь сможет установить значение назначенное или неназначенное , ваша чувствительная фильтрация будет go извиваться.

Но если это не проблема (таблица имеет два столбца и один только для чисел), вот как вы можете отфильтровать его (хотя я не вижу ваш DataSource, я предполагаю по определению столбца, что status - это правильный ключ для проверки for): 

this.dataSource.filterPredicate = (data, filter): boolean => {
  const transformedFilter = filter.trim().toLowerCase();
  if (data.status.trim().toLowerCase() === transformedFilter) {
    return true;
  } else if (data.telefonnummer.trim().toLowerCase() === transformedFilter) {
    return true;
  };
  return false;
}

Простой фрагмент, чтобы было понятно, что происходит.

ps telefonnummer.trim() может произойти ошибка, если telefonnummer является числом, а не строкой. status.trim() также стоит проверить, не является ли оно ложным значением

...