観測可能なアイテムの値がhtmlテンプレートに表示されない理由

Question

私はAngular4で簡単なリスト詳細サンプルを作成しました。詳細ページでは、Observable型クラスを持つアイテムの詳細を表示できませんでした。コードブロックの下にコピーする。

@Component({ 
    selector: 'app-user-detail', 
    template: ` 
    <h2>User Details</h2> 
    <div *ngIf="user$ | async as user; else elseBlock"> 
     <h3>{{user$.name.first }}</h3> 
     <p> 
     <button (click)="goBack()">Back</button> 
     </p> 
    </div> 
    <ng-template #elseBlock>Undefined data</ng-template> 
    `, 
    styleUrls: [ './user-detail.component.css' ] 
}) 
export class UserDetailComponent implements OnInit { 
    user$: Observable<User>; 

    constructor(
    private userService: UserService, 
    private route: ActivatedRoute, 
    private location: Location 
) {} 

    ngOnInit(): void { 
    this.user$ = this.route.paramMap 
     .switchMap((params: ParamMap) => this.userService.getUser(params.get('email'))); 
    // .subscribe(function(x) { console.log(x); }); 

    } 

    goBack(): void { 
    this.location.back(); 
    } 
} 

ユーザー$オブジェクトを次のコードブロックでチェックすると、コンソールログにユーザーデータが正常に取得されることがわかります。

this.route.paramMap 
     .switchMap((params: ParamMap) => this.userService.getUser(params.get('email'))); 
     .subscribe(function(x) { console.log(x); }); 

しかし、私はhtmlテンプレートでユーザーデータを表示できませんでした。

Answer 1

h3の内部には、観察可能なuser$プロパティがあります。

はあなたではなく、ローカル変数、userを使用する必要があります：HTMLテンプレート上のデータを表示していないため

<div *ngIf="user$ | async as user; else elseBlock"> 
    <h3>{{ user.name.first }}</h3> <!-- use user here, not user$ --> 
    <p> 
    <button (click)="goBack()">Back</button> 
    </p> 
</div> 

Answer 2

理由は、私のサービスは関数を呼び出すと関連しています。 this.userService.getUser（params.get（ 'email'））。 params.get（ 'email'）は、サービスが期待されるデータを照会できないように、「：」文字列を含む電子メールを返します。単に "："を空の文字列に置き換えた