未定義の角4のプロパティ 'name'を読み取れません

Question

コンポーネントのテンプレートに値を印刷しようとしています。

は、しかし、私はこの質問のためのコードから余分なコンテンツを削除した上でのエラー Cannot read property 'name' of undefined

を取得しています。私は詳細の最初の行にアクセスしたい。

コンポーネントあなたのエラーメッセージから

import { 
    Component 
} from '@angular/core'; 
import { 
    Person 
} from './person'; 
import { 
    getPersonDetailsService 
} from './person.service'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     {{data[0].name}} 
     ` 
}) 
export class AppComponent { 
    data: Person[] = []; 
    ngOnInit(): void { 
    this.getPersonDetailsService.getData() 
     .then(data => this.data = data.slice(1, 5)); 
    } 

} 

Answer 1

私はあなたがブラウザで印刷するときにデータが定義されているかどうかを最初に確認するべきだと思います。

{{data[0]?.name}} 

データが最初に定義されていないため、データの名前プロパティにアクセスすることはできません。

Documentation

角度安全なナビゲーション演算子（？）プロパティパス内のNULLと未定義の値を防ぐために、流暢と便利 方法です。ここで は、currentHeroが である場合、ビューレンダリングの失敗から保護します。

変数ではなくngOnInitのコンストラクタにこれを入れてみてください&&条件

{{data[0] && data[0].name}}

Answer 2

ファイルはdataが定義されていないように、それはそうです（または空） - とエラーが

{{data[0].name}} 

はたぶん入れるという行に起こっていますa console.log(data)何が起こっているかを確認する

Answer 3

を使用してnullであるかどうかも確認することができます：

getPersonDetailsService.getData() ... 

はまた、あなたが必要'データ'の長さが0より大きい場合にテンプレート内で何らかのチェックをする0 {{data[0]?.name}}

Answer 4

getData（）サービスからの応答が解決された後、 "data"の値が更新されています。私はあなたがサービスを打つこととデータを取得していると仮定しています。それにもかかわらず、サービスが応答を返すと、その約束は解決されます。一方、ビューはテンプレートをレンダリングしようとし、式data [0]を評価するので、データがまだサービスから到着していないため、0で要素を検出しません。したがって、0番目のインデックスの要素が未定義であるため、エラーが発生します。

ここで観察可能なものを使用する必要があります。