Angular4가 하위 구성 요소에 데이터를 공유합니다.

Question

API를 호출하는 부모 구성 요소가 있으며 데이터가 반환됩니다. 그것은이 같은 루프가 있습니다

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

당신은 내가 자신을 반복 bzQuestion라는 또 다른 구성 요소가 있음을 알 수있다. 해당 구성 요소에 데이터 (질문)를 전달하고 싶습니다. 난 당신이 @Input()을 사용할 수 있습니다라는 비디오를 시청, 그래서 이런 짓을 :

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

: 다음 부모에게이 일을하여 아이 컴퍼넌트에 질문을 추가하려고

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'의 알려진 속성이 아닙니다 때문에

는 '질문'에 결합 할 수 없습니다. ("

는 아무도 내가 뭘 잘못 알고 있나요?

Answer 1

를 당신은, 구성 요소에서 할 div에하지 않도록해야합니다. 구성 요소 선택은 앱 bzQuestion, 또는 그런 일, u는에서 그것을 찾을 수 있습니다. TS의 구성 요소의 파일.

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