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>

但是编译器不禁说：

无法绑定问题＆＃39;因为它不是“div”的已知属性。（＆＃34;

有谁知道我做错了什么？

Answer 1

您需要在组件中执行此操作，而不是div。组件选择器是app-bzQuestion，或类似的东西，你可以在组件的.ts文件中找到它。

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

Angular4将数据共享给子组件

1 个答案: