여러 비동기 파이프 변수가 있는 *ngIf

여러 비동기 파이프 변수가 있는 *ngIf

두 개의 관찰 가능한 것을 하나로 결합하려고 노력했습니다.*ngIf및 둘 다 출력된 경우 사용자 인터페이스를 보여줍니다.

테이크:

<div *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
    <b>{{userLanguage.language}}</b> and <b>{{userLanguage.user}}</b>
</div>

보낸 사람: 하나의 Angular *ngIf 문에 두 개의 비동기 구독 삽입

하지만 제 경우에는 컴파일하는 한 효과가 있습니다.language$그리고.user$두 개의 HTTP 요청에서 온 것이고, 그것은 보입니다.user$다음과 같은 런타임 오류를 던집니다.TypeError: _v.context.ngIf.user is undefined.

근본적으로 제가 진정으로 원하는 것은 다음과 같습니다(이것은 효과가 없습니다).

<div *ngIf="language$ | async as language && user$ | async as user">
    <b>{{language}}</b> and <b>{{user}}</b>
</div>

최선의 솔루션:

• 구성 요소 내부에서 구독하고 변수에 씁니다.
• 성분 내부의 관측 가능한 두 개를 다음과 같이 결합하는 방법withLatestFrom
• null 검사 추가{{userLanguage?.user}}

이 조건은 중첩된 상태로 처리해야 합니다.ngIf지시사항:

<ng-container *ngIf="language$ | async as language">
  <div *ngIf="user$ | async as user">
    <b>{{language}}</b> and <b>{{user}}</b>
  </div>
<ng-container>

단점은 HTTP 요청이 직렬로 수행된다는 것입니다.

그것들을 동시에 수행하고 여전히 하기 위해서.language그리고.user변수. 더 많은 내포가 필요합니다.

<ng-container *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
  <ng-container *ngIf="userLanguage.language as language">
    <ng-container *ngIf="userLanguage.user as user">
      <div><b>{{language}}</b> and <b>{{user}}</b></div>
    </ng-container>
  </ng-container>
</ng-container>

이를 위한 더 효율적인 방법은 논리를 이 시점에서 템플릿에서 구성요소 클래스로 이동하고 관찰 가능한 단일 항목을 만드는 것입니다.withLatestFrom

다음과 같은 요령도 사용할 수 있습니다.하나의 중첩이 추가로 필요합니다.

<ng-container *ngIf="{a: stream1$ | async, b: stream2$ | async, c: stream3$ | async} as o">
  <ng-container *ngIf="o.a && o.b && o.c">
    {{o.a}} {{o.b}} {{o.c}}
  </ng-container>
</ng-container>

개체 o는 항상 진실이므로 첫 번째 *ngIf는 스트림 값을 저장하는 데 단순하게 사용됩니다.내부에서 변수 이름을 o로 지정해야 합니다.

그것은 당신이 무엇을 원하는지에 따라 다르지만, 저는 로드된 플래그를 가진 포크 조인 연산자가 좋은 생각일 수 있다고 생각합니다.

https://www.learnrxjs.io/operators/combination/forkjoin.html

forkJoin 모든 Observable이 완료될 때까지 서브스크립션의 값을 반환합니다.

Observable.forkJoin(
  Observable.of("my language").delay(1000),
  Observable.of("my user").delay(1000),
).subscribe(results => {
  this.language = results[0]
  this.user = results[1]
})

구독의 onError에 오류를 포착하여 표시할 수 있습니다.

언급URL : https://stackoverflow.com/questions/47391735/ngif-with-multiple-async-pipe-variables