Поиск в таблице материалов не работает с трубой - PullRequest
0 голосов
/ 10 января 2020

В своей таблице материалов я использую @pipe, чтобы получить имя вместо позиция в строке позиции ...

Я получаю имя из другого JSON файла ...

<ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position | FilterData }} </mat-cell>

@Pipe({
  name: 'FilterData'
})
export class OrdinalPipe implements PipeTransform {

  transform(value: Element): string {
    var data =   ElementTitle.filter(
          ElementTitle => ElementTitle.position === value);  // ElementTitle is second JSON file
          return  data[0].name; 
  }
}

А теперь, когда я пытаюсь использовать SEARCH BOX в angular -материальной таблице для поиска по имени нет данных, но если я введу номер позиции , я получу отфильтрованные данные правильно.

Вероятно, проблема в том, что данные с данными взяты из компонента, но pipe изменяют данные в html ...

Как СКАЗАТЬ MAT-таблицы, чтобы также искать по трубопроводным данным в таблице?

Вот рабочий пример, попробуйте выполнить поиск по названию (Nitrogen, Helium et c ...) https://stackblitz.com/edit/angular-ttg6ux?file=src / app / table-filtering-example.ts

Thnx

Ответы [ 2 ]

1 голос
/ 10 января 2020

Пожалуйста, обратитесь ниже URL:

https://stackblitz.com/edit/angular-ttg6ux-sokueh?file=src / app / table-filtering-example.ts

Пожалуйста, дайте мне знать, если у вас возникнут какие-либо трудности.

Спасибо:)

1 голос
/ 10 января 2020

Если вы используете Таблицу материалов, я предлагаю вам также использовать MatTableDataSource. Объявите его в начале вашего машинописного текста и загрузите его данные, как если бы это был массив или список.

datasource :MatTableDataSource<any>;

someMethodToLoadData(){
   // get your data
   this.datasource = new MatTableDataSource<any>(data);
}

С источником данных теперь вы можете использовать его нативное свойство фильтр :

машинопись

filterTable (filterValue :string) { 
   this.datasource.filter = filterValue.trim().toLowerCase(); 
}


html

<mat-form-field>
   <input matInput (keyup)="filterTable($event.target.value)">
</mat-form-field>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...