Com a ajuda destetutorial Eu escrevi minha própria fonte de dados para a tabela de material angular. Pego a lista de dados de uma API e a mostro em uma tabela de materiais.

Código MyDataSource

export class MyDataSource extends DataSource<any> {

  private users: Observable<User[]>;

  constructor(private userService: UserService) {
    super();
  }

  connect(): Observable<User[]> {
    this.users = this.userService.getAll();
    return this.users;
  }

  disconnect() { }

  filterWithCriteria(filterData: any): any {
    return this.users
      .filter(element => element[filterData.criteria].toLocaleLowerCase().includes(filterData.searchTerm.toLocaleLowerCase()))
      .map(element => element)
      .subscribe(
        element => console.log(element),
        err => console.error(err),
        () => console.log('Streaming is over')
      );
   }
}

A API fornece um observável com objetos de usuário.

Código Usuário

export class User implements models.User {
  constructor(
    public name?: string,
    public adress?: string,
    public email?: string,
    public telefon?: string,
    public birthday?: Date
  ) {}
}

O objetivo é pesquisar na lista do usuário com um critério. Os critérios podem ser nome, endereço, ...

.filter(element => element[filterData.criteria].toLocaleLowerCase().includes(filterData.searchTerm.toLocaleLowerCase()))

Essa linha me dá o erro de que toLocaleLowerCase não está definido em User and

 console.log(this.users[filterData.criteria]);

me dá 'indefinido'.

Obrigado pela ajuda,

Cumprimentos