角2：データをフェッチして単一の値を返す方法は？

Question

アカウントページは、ログインしたユーザーにデータを返す必要があります。

と呼ばれるJSONファイルの出力が

getUserData() { 
     const token = this.currentUser.token; 

     const body = JSON.stringify({token: token}); 
     return this.http.post('https://test.com/src/getuserdata', body) 
     .map((response: Response) => { 
      const data = response.json(); 
      const returnArray = []; 
      for (let key in data) { 
      returnArray.push(data[key]); 
      } 
      return returnArray; 
     }); 
    } 

ですhttp.get.service.ts：

{ 
"email":"test@test.com","lastname":"Grimes" 
} 

account.component.ts私は、次のコードを持っています

export class AccountComponent implements OnInit { 

    userData: any = []; 

    constructor(private httpService: HttpService) { } 

    ngOnInit() { 
    this.httpService.getUserData() 
     .subscribe(
     data => { 
      this.userData = data; 
     } 
    ); 
    } 

} 

ngOnInitの応答は

account.component.html " test@test.com、グライムズ"

... <div class="n-r-m-e" [innerText]="userData.email"> <div class="n-r-m-e-v" [innerText]="userData.lastname"> ... 

のdivタグである "undefinded" を返します。どうすればこの問題を解決できますか？

Answer 1

userDataが未定義の理由は、データのフェッチが非同期であり、テンプレートが最初にレンダリングされたときに使用できないためです。

非同期操作からテンプレートにデータを渡すには、オブザーバブルと非同期パイプを使用する必要があります。

コンポーネント： userData: Observable<any>;

テンプレート： <account-component [userData]='userData | async'></account-component>

また、あなたが使用する必要がないように、テンプレートに渡しているデータのためのモデルを作成することをお勧めだろうObservable<any>、代わりに応答が非同期であるため、データが取得された前にビューがレンダリングされるObservable<User>

Answer 2

のようなものを使用することができます。

これはいくつかの方法で解決できます。 null値を保護しますSafe Navigation Operatorを、次のいずれかを使用します

<div class="n-r-m-e" [innerText]="userData?.email"></div> 
<div class="n-r-m-e-v" [innerText]="userData?.lastname"></div> 

それとも、userData

<div *ngIf="userData"> 
    <div class="n-r-m-e" [innerText]="userData.email"></div> 
    <div class="n-r-m-e-v" [innerText]="userData.lastname"></div> 
</div> 

の値が存在しない限り、テンプレートの一部は表示されません*ngIfの内側にあなたのdivのをラップすることができまた、userDataオブジェクトを初期化して、未定義にならないようにすることもできます。