[解決済み] Angularです。ライフサイクルフックのうち、Componentが利用できる入力データはどれか?
質問
の配列を受け取るコンポーネントがあります。
image
オブジェクトの配列を
Input
のデータとして使用することができます。
export class ImageGalleryComponent {
@Input() images: Image[];
selectedImage: Image;
}
コンポーネントのロード時に
selectedImage
の最初のオブジェクトに設定されるようにしたいです。
images
配列の最初のオブジェクトに設定されます。私はこれを
OnInit
のライフサイクルフックをこのようにします。
export class ImageGalleryComponent implements OnInit {
@Input() images: Image[];
selectedImage: Image;
ngOnInit() {
this.selectedImage = this.images[0];
}
}
この場合、エラーが発生します。
Cannot read property '0' of undefined
というエラーになり、これは
images
の値はこのステージに設定されていないことを意味します。また
OnChanges
フックも試しましたが、配列の変化を観察する方法についての情報を得ることができず、行き詰まっています。どうすれば期待通りの結果を得られるのでしょうか?
親コンポーネントはこのような感じです。
@Component({
selector: 'profile-detail',
templateUrl: '...',
styleUrls: [...],
directives: [ImageGalleryComponent]
})
export class ProfileDetailComponent implements OnInit {
profile: Profile;
errorMessage: string;
images: Image[];
constructor(private profileService: ProfileService, private routeParams: RouteParams){}
ngOnInit() {
this.getProfile();
}
getProfile() {
let profileId = this.routeParams.get('id');
this.profileService.getProfile(profileId).subscribe(
profile => {
this.profile = profile;
this.images = profile.images;
for (var album of profile.albums) {
this.images = this.images.concat(album.images);
}
}, error => this.errorMessage = <any>error
);
}
}
親コンポーネントのテンプレートには、この
...
<image-gallery [images]="images"></image-gallery>
...
どのように解決するのですか?
入力プロパティは
ngOnInit()
が呼び出される前に入力されます。 しかし、これは、子コンポーネントが作成されるときに、入力プロパティをフィードする親プロパティがすでに入力されていると仮定しています。
画像データはサービスから非同期に取り込まれます(したがって、httpリクエストです)。 したがって、入力プロパティは
ngOnInit()
が呼び出されたとき、input プロパティは入力されません。
問題を解決するには、サーバーからデータが返されたときに、新しい配列をparentプロパティに代入してください。 実装
ngOnChanges()
を子の中に入れてください。
ngOnChanges()
は、Angularの変更検出が新しい配列の値を子へ伝搬するときに呼び出されます。
関連
-
[解決済み】アンギュラーコンポーネントにサービスを注入しようとするとエラー "EXCEPTION: Can't resolve all parameters for component"、なぜ?
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み] angular-routeとangular-ui-routerの違いは何ですか?
-
[解決済み] Angularの@Directiveと@Componentの比較
-
[解決済み] JSのDateからDay名
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] JSHintの'+'前の改行不良の説明
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]