각도 비동기 파이프 및 객체 속성

각도 비동기 파이프 및 객체 속성

이 질문에는 이미 다음과 같은 답변이 있습니다.

각도 2 - 약속에서 비동기 개체 데이터 표시 (7개 답변)

닫힘작년에

ngFor를 사용하지 않고 sync pipe를 사용해야 합니다.관찰 가능한 비동기 로드된 객체의 속성을 확인해야 합니다.

이것이 제가 원하는 것이지만 작동하지 않는 것입니다.

 <ion-item *ngIf="user$.anonymouse | async">
     <ion-label>Login</ion-label>
 </ion-item>

//EDIT: 위의 코드를 사용할 때 이 오류가 발생합니다.

예외: [!user$]의 'AsyncPipe' 파이프에 대한 인수 'true'가 잘못되었습니다.anonymoususe | sync SettingsPage@27:22]

이것을 해결할 방법이 없을까요?

나는 Ctrl에서 관측 가능한 이 값을 정상 변수에 저장할 수 있다는 것을 알고 있지만 성능 등 때문에 그렇게 하고 싶지 않습니다.

오류는 놀랍게도 정확합니다.*ngIf지시적 기대true아니면false그리고 결과적인 표현을 사용하여 다음을 렌더링할지 여부를 결정합니다.HTMLDOM의 요소입니다.

예외: [!user$]의 'AsyncPipe' 파이프에 대한 인수 'true'가 잘못되었습니다.anonymoususe | sync SettingsPage@27:22]

당신이 가지고 있는 표현은.user$.anonymouse이것은 진실을 평가하지만 불행하게도 당신은 사용할 수 없습니다.async이 지시를 받아 파이프를 연결합니다.async파이프 "transform"(일명 "pipes")의 범위 내에서 결과 출력을 노출시키는 입력*ngFor예를 들어 지시입니다.

파이프에서는 아래에 정의된 세 가지 유형 중 하나를 예상합니다(AsyncPipe에 대한 자세한 내용).

transform(obj: Observable<any>| Promise<any>| EventEmitter<any>)

이것을 해결할 방법이 없을까요?

네, 디자인대로 사용하시면 됩니다.예를 들어 a에서*ngFor지시:

<ion-item *ngFor="(user$ | async)?.anonymouse">
     <ion-label>Login</ion-label>
</ion-item>

아니면 배관이 필요없으니 아예 빼내도 됩니다.*ngIf지시:

<ion-item *ngIf="user$.anonymouse">
     <ion-label>Login</ion-label>
</ion-item>

@Sean 님이 댓글로 말씀하신 것처럼, 당신의*ngIf문은 결과 개체 속성을 기반으로 해야 합니다.anonymouse의user$반환되는 개체입니다.이와 같은 경우:

<ion-item *ngIf="(user$ | async)?.anonymouse">
     <ion-label>Login</ion-label>
</ion-item>

이것은 저에게 효과가 있었고, 아래 파이프의 결과를 사용하는 방법의 예는 다음과 같습니다.

요소

 message$: Observable<{message: string}>;

  private messages = [
    {message: 'You are my hero!'},
    {message: 'You are the best hero!'},
    {message: 'Will you be my hero?'}
  ];

  constructor() { this.resend(); }

  resend() {
    this.message$ = Observable.interval(500)
      .map(i => this.messages[i])
      .take(this.messages.length);
  }

보다

<h2>Async Hero Message and AsyncPipe</h2>
<p>Message: {{ (message$ | async)?.message }}</p>
<button (click)="resend()">Resend</button>`

여기서 작동 예를 찾을 수 있습니다.

<!-- This is needed to wait for async pipe to resolve -->
<div *ngIf="user$ | async as user"> 

   <!-- Only on resolve of async pipe -->
   <ion-item *ngIf="user.whateverPropertyYouWantToCheck">
        <ion-label>Login</ion-label>
    </ion-item>
</div>

제가 여기서 바꿨다는 것을 알아두시기 바랍니다.user$로.user, 원하는 경우 동일한 변수 이름을 사용할 수 있지만, 이를 통해 값이 더 이상 비동기 파이프가 아님을 보다 명확하게 알 수 있습니다.

Anonymousouse$ = user$.pipe(맵(사용자 => 사용자?)입니다.익명 사용));

<ion-item *ngIf="user$.anonymouse | async">

언급URL : https://stackoverflow.com/questions/37142196/angular-async-pipe-and-object-property