Блог

Кто-то уже использовал ng-table в angular и мог понять, как использовать его с firebase collecction?

Я пытаюсь использовать ng-table (последний пример) для сортировки и фильтрации моей коллекции в Angular 10, поэтому я попытался просто изменить константу в коде на свой объект, и у меня это не сработало. Я думаю, мне нужно преобразовать мой объект в массив, поэтому я попробовал эту библиотеку, чтобы сделать это, а также не работает. Также пытался найти это в stackoverflow, и все, что я обнаружил, — это другие с той же проблемой.

Это именно та функция, в которой мне нужно это сделать. COUNTRIES — это массив, который поступает из *countries.ts . Приведенная ниже функция находится в country.service.ts.

   private _search(): Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;

    // 1. sort
    let countries = sort(COUNTRIES, sortColumn, sortDirection);

    // 2. filter
    countries = countries.filter(country => matches(country, searchTerm, this.pipe));
    const total = countries.length;

    // 3. paginate
    countries = countries.slice((page - 1) * pageSize, (page - 1) * pageSize   pageSize);
    return of({countries, total});
  }
}
  

Это то, что я пробовал с библиотекой, которая обнаружила:

 this.items = this.firestore.collection('users').valueChanges();

alert( O2A(this.items) );
  

Но у меня это не работает.

Спасибо!

Я возьму пример, который вы предоставляете для ответа.
Минимальное требование для этого — немного адаптировать country.service. У нас есть изменения в constructor() и private _search() методе. Нам нужно будет заменить COUNTRIES переменную, содержащую массив данных, на ваш массив пользователей (обратите внимание, что вам нужно будет адаптировать весь код в соответствии с вашими атрибутами пользователей):

country.service.ts

 ...
users: User[];

constructor(private pipe: DecimalPipe) {
    this._search$.pipe(
      tap(() => this._loading$.next(true)),
      debounceTime(200),
      switchMap(() => this._search()),
      delay(200),
      tap(() => this._loading$.next(false))
    ).subscribe(result => {
      this._countries$.next(result.users);
      this._total$.next(result.total);
    });
    // this will get your users and start the _search$ above
    this.firestore.collection('users').valueChanges().pipe(take(1)).subscribe(users => {
        this.users = users;
        this._search$.next();
    });
  }
  
  private _search(): Observable<SearchResult> {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;

    // 1. sort
    // provide your users (instead of COUNTRIES exemple variable) as a param 
    let users = sort(this.users, sortColumn, sortDirection);

    // 2. filter
    users = users.filter(user => matches(user, searchTerm, this.pipe));
    const total = users.length;

    // 3. paginate
    users = users.slice((page - 1) * pageSize, (page - 1) * pageSize   pageSize);
    return of({users, total});
  }
...
  

Не забудьте соответствующим образом переименовать свои переменные ( users вместо countries ) и ваш тип ( User вместо Country ) в параметрах методов.

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

Измените также интерфейс SearchResult, в противном случае вы получите ошибку компиляции:

 interface SearchResult {
  users: User[];
  total: number;
}