Angular4が子コンポーネントにデータを共有する

Question

APIを呼び出す親コンポーネントがあり、データが返されます。 それは、このようなループを持っています

<div *ngIf="campaign"> 
    <div *ngFor="let question of campaign.questions" bzQuestion></div> 
</div> 

あなたは、私は自分自身を繰り返しbzQuestionと呼ばれる別のコンポーネントを持っていることがわかります。そのコンポーネントにデータ（質問）を渡したいと思います。私はあなたが@Input（）を使用することができますと言って、ビデオを見て、私はこれをしなかった：

import { Component, OnInit, Input } from '@angular/core'; 
import { IQuestion } from '../data/models/question.model'; 

@Component({ 
    selector: 'bz-question', 
    templateUrl: './question.component.html', 
    styleUrls: ['./question.component.scss'], 
    providers: [ ] 
}) 
export class QuestionComponent { 
    @Input() public question: IQuestion; 
} 

私はその後、親にこれを行うことによって、子コンポーネントに質問を追加しようとしました：

<div *ngIf="campaign"> 
    <div *ngFor="let question of campaign.questions" [question]="question" bzQuestion></div> 
</div> 

しかし、言ってコンパイラのうめき声：それは「DIV」の既知の特性ではないので

は「質問」にバインドできません。 （」

誰もが私が間違っているのか知っていますか？

Answer 1

あなたはコンポーネントではなく、divの中でそれを行う必要があります。コンポーネントの選択は、uはのそれを見つけることができ、アプリ-bzQuestion、またはそのような何かです。コンポーネントのTSファイル。

<div *ngIf="campaign"> 
    <app-bzQuestion *ngFor="let question of campaign.questions" [question]="question"></app-bzQuestion> 
</div>