programing
안녕하세요. 많은 속성(이름, 제목, 주소...)을 가진 관찰 가능한 사용자 $가 있습니다.
component{ user$:Observerable<User>; constructor(private userService:UserService){ this.user$ = this.userService.someMethodReturningObservable$() } }
HTML 템플릿의 비동기 파이프를 사용하여 구독하고 이와 같은 로컬 변수에 바인딩할 수 있는 방법이 있습니까?
<div #user="user$ | async"> <h3> {{user.name}} </div>
컨스트럭터에서 구독하고 OnLeave/OnDestroy에서 구독을 취소할 수 있다는 것을 알고 있지만, 비동기 파이프를 사용할 수 있는지 궁금합니다.
건배.
#템플릿 참조 변수입니다.DOM 요소로 지연되므로 그렇게 사용할 수 없습니다.
#
현재 Angular에서는 로컬 변수가 구현되지 않으므로 이 닫힌 이슈를 모니터링하여 관련 이슈에 대한 참조를 확인할 수 있습니다.
Angular 4 이후의 구문은ngIf그리고.ngFor로컬 변수를 허용하도록 지침이 업데이트되었습니다.자세한 내용은 참조하십시오.그래서 할 수 있습니다.
ngIf
ngFor
<div *ngIf="user$ | async; let user"> <h3> {{user.name}} </h3> </div>
이렇게 하면 생성됩니다.div래퍼 요소 및 이 요소에 클로킹 동작을 제공하므로 필요하지 않습니다.?.'엘비스' 교환원.
div
?.
추가 마크업이 바람직하지 않은 경우 다음과 같이 변경할 수 있습니다.
<ng-container *ngIf="user$ | async; let user">...</ng-container>
클로킹 동작이 바람직하지 않은 경우 식을 진정한 자리 표시자 값으로 변경할 수 있습니다.
자리 표시자는 개체 값에 대한 빈 개체일 수 있습니다.
<div *ngIf="(user$ | async) || {}; let user"> <h3> {{user?.name}} </h3> </div>
아니면 원시적인 가치를 위한 공간,
<div *ngIf="(primitive$ | async) || ' '; let primitive"> <h3> {{primitive}} </h3> </div>
@비욘 쉬프와 @estus
다음 대신:
<div *ngIf="(user$ | async) || {}; let user">
수행:
<div *ngIf="(user | async) as user">
다음 구문을 사용합니다.
참고: 식 끝에 "as user"를 추가합니다.
이렇게 하면 user$ | async가 평가될 때까지 기다렸다가 결과를 사용자 값(비달러 접미사)에 바인딩할 수 있습니다.
위해서*ngFor추가하면 가능합니다.*ngIf상위 요소에 대한 지시사항:
*ngFor
*ngIf
<ul *ngIf="users$ | async as users"> <li *ngFor="let user of users">{{user.name}}</li> <li *ngIf="!users.length">No users</li> </ul>
부모 요소에 대한 구조적 지침이 이미 있는 경우, 다음과 같은 중간 요소의 도입.<ng-container>필요할 수도 있습니다.
<ng-container>
언급URL : https://stackoverflow.com/questions/43325791/angular-using-async-pipe-on-observableobject-and-bind-it-to-local-variable-i