typescript - Angular - Kết quả kết hợp của Observables từ nhiều lần gọi

CHỈNH SỬA 30-07-2018 01:57 CET: Vẫn đang tìm giải pháp cho vấn đề dưới đây:

Tôi có đoạn mã sau:

getBoolean(dataRef1, dataRef2) {
  const myFirstObservable = this.af.object(dataRef1).valueChanges();
  const mySecondObservable = this.af.object(dataRef2).valueChanges();

  return combineLatest(myFirstObservable, mySecondObservable).pipe(map(([data1, data2]) => data1 && data2)))
}

Về cơ bản, những gì mã làm là: nó kết hợp kết quả của hai observable và sau đó kiểm tra từng cái xem nó có trả về giá trị nào không. Nếu cả hai observable đều có giá trị, trả về true còn không thì trả về false.

Cho đến nay mọi thứ đều ổn, mọi thứ đang hoạt động như mong đợi. Sau đó, tôi gọi phương thức từ View của mình, cung cấp các tham chiếu node động cho các observable và sử dụng biến boolean để thêm một phần tử điều kiện:

<div *ngIf="getBoolean('dataN', 'dataK') | async"> My lovely div content goes here</div>

Tuy nhiên, div của tôi hoàn toàn không hiển thị trên giao diện của tôi.

Có ai có thể chỉ cho tôi chỗ tôi sai và giúp tôi đạt được kết quả mong muốn không?

Câu trả lời #1

Rất có thể vấn đề là bạn đang gọi phương thức getBoolean('dataN', 'dataK') trong template của mình. Mỗi lần phát hiện thay đổi, Angular sẽ gọi phương thức getBoolean trả về một Observable mới. Cái cũ sẽ bị async hủy đăng ký và chỉ cái mới là đang hoạt động.

Cùng lúc đó, toán tử combineLatest yêu cầu tất cả các Observable nguồn phải phát ít nhất một lần, điều này không có khả năng xảy ra bởi vì async đăng ký/hủy đăng ký trong mỗi chu kỳ phát hiện thay đổi, và điều này có thể xảy ra nhiều lần mỗi giây.

Vì vậy, tôi gợi ý bạn nên lưu Observable vào một thuộc tính:

public obs$ = combineLatest(myFirstObservable, mySecondObservable, (data1, data2) => data1 && data2);

Sau đó chỉ sử dụng obs$ | async trong các mẫu.

Cuối cùng, bạn có thể thêm một vài logic bên trong getBoolean để kiểm tra xem obs$ có tồn tại hay không và nếu có, bạn sẽ chỉ cần trả lại nó nguyên vẹn.

Câu trả lời #2

getBoolean() đang không trả về gì. Lệnh return bên trong callback của subscribe chỉ trả về cho subscribe. Một cách để triển khai logic này.

getBoolean(dataRef1, dataRef2): Observable<boolean> {
  const myFirstObservable = this.af.object(dataRef1).valueChanges();
  const mySecondObservable = this.af.object(dataRef2).valueChanges();
  return combineLatest(myFirstObservable, mySecondObservable, (data1, data2) => data1 && data2)
}

Và điều kỳ diệu: bạn đăng ký trong HTML với liên kết async pipe, điều này sẽ đăng ký cho bạn:

<div *ngIf="getBoolean('dataN', 'dataK') | async"> My lovely div content goes here</div>