Мат-таблица Фильтр данных от Firbase по столбцам - PullRequest
Новая
       41

Мат-таблица Фильтр данных от Firbase по столбцам

2 голосов
/ 23 апреля 2019

Я использую угловой 6, пожарную базу и материал угловой.Я могу загрузить свои данные в таблицу, я могу отсортировать их, использовать paginator и отфильтровать их глобально

Теперь я хотел бы изменить свой фильтр таким образом, чтобы он просто фильтровал столбец «name» и имелвторое поле фильтра для фильтрации по «общему» столбцу.

Можете ли вы помочь мне принять стратегию?спасибо 

@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss']
})

export class TableComponent implements OnInit {

showSpinner = true;

Data = {nom: '',finessgeo:'', cat1: '', commune: '',CP: '',departement:'',tel: ''}

displayedColumns = ['nom', 'finessgeo', 'cat1', 'commune', 'CP',    'departement',  'tel'];
dataSource = new MatTableDataSource();

applyFilter(filterValue: string) {
filterValue = filterValue.trim(); 
filterValue = filterValue.toLowerCase(); 
this.dataSource.filter = filterValue;
}

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}

constructor(public authService: AuthService,private geoService: GeoService, private router: Router,private database: AngularFireDatabase) { }


onNewGeo() {
this.router.navigate(['']);
}

onSignOut() { this.authService.signOutUser(); }

ngOnInit() { return this.geoService.getGeos().subscribe(res =>{this.dataSource.data = res;this.showSpinner = false;});  }}


export class DataDataSource extends DataSource<any> {

constructor(private geoService: GeoService) { super() }

connect() {return this.geoService.getGeos();}
disconnect() {}
}

1 Ответ

1 голос
/ 24 апреля 2019

Попробуйте код ниже: 

ngOnInit() {
    this.dataSource.filterPredicate = function(data, filter: string): boolean {
      return data.name.toLowerCase().includes(filter) || data.nom.toString() === filter;
    };
  }
...