Как правильно получить массив данных из наблюдаемых?

Question

Мне нужны две функции для возврата всех данных, а также конкретных отфильтрованных данных, но мои конструкции неверны.Ниже приведено то, что «думаю» я хочу, но возвращаю подписки вместо массивов:

   allItems() {

      var collectionAll: AngularFirestoreCollection<Item> =
         this._afs.collection<Item>('items');

      var itemArray$: Observable<Item[]> =
         collectionAll.valueChanges();

      // Returns Subscription but I need Items[]
      return itemArray$.subscribe(items => {
         return items;
      })
   }

   specificItems(name: string) {

      var collectionSpecific: AngularFirestoreCollection<Item> =
         this._afs.collection<Item>('items', ref =>
            ref.where('name', '==', name));

      var itemArray$: Observable<Item[]> =
         collectionSpecific.valueChanges();

      // Returns Subscription but I need Items[]
      return itemArray$.subscribe(items => {
         return items;
      })
   }

Также я думаю, что это должна быть асинхронная функция, но функция подписки не возвращает обещание,

И я даже не уверен, в какой момент мне фактически будет начислен счет чтения из Firestore ...?

Answer 1

Если вы хотите обещание, вам нужно преобразовать Наблюдаемое в Обещание, используя toPromise:

specificItems(name: string): Promise<Item[]> {
  var collectionSpecific: AngularFirestoreCollection<Item> =
     this._afs.collection<Item>('items', ref =>
        ref.where('name', '==', name));

  var itemArray$: Observable<Item[]> =
     collectionSpecific.valueChanges();

  return itemArray$.toPromise();
}

Answer 2

Объявите приведенную ниже модель в другом месте, чтобы вы могли повторно использовать одну и ту же модель.

  export class EmployeeRoster {
        RosterDate: Date;
        EmployeeId: number;
        RosterDayName: string;
        ProjectId: number;
        ShiftId: number;
        ShiftTime: string;
        ShiftColor: string;
        IsOnLeave: boolean;
    }

Объявите метод ниже на вашем уровне обслуживания.

      GetSavedEmployeeData(empIds: EmployeeIdlistToRoster[], sDate: string, eDate: string): Observable<EmployeeRoster[]> { 
        let empIdsValue = '';
        if (empIds !== null && empIds.length > 0) {
          empIds.forEach(function (em) {
            empIdsValue += em.EmpId + ',';
          });
        }

        //How to pass value as a parameter
        const paramsdsf = new HttpParams()
          .set('empIds', empIdsValue)
          .append('sDate', sDate)
          .append('eDate', eDate);
        return this.http.get<EmployeeRoster[]>(apiUrl, { params: paramsdsf });
      }

Это только пример, который вы можете обновить этот метод имодель согласно вашему требованию.

Answer 3

Наблюдаемые очень мощные, вы должны держать их как есть.

allItems = this._afs.collection<Item>('items').valueChanges();

В вашем шаблоне вы можете просто использовать асинхронный канал для чтения ваших данных:

<div *ngFor="let items of allItems | async">...</div>

Это самый мощный способ использования Angular по нескольким причинам, поэтому попробуйте изучитьэто как можно скорее, потому что в основном Angular = RxJS (конечно, это не так, но показывает, сколько вам нужно RxJS в Angular)