角度共享数据到子组件

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 中。组件选择器是 app-bzQuestion 之类的，你可以在组件的 .ts 文件中找到。

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