Question

我正在尝试将数据“testData”传递给子组件“多卡”但是当我尝试这样做时它会返回此错误。

未捕获错误：模板解析错误：无法绑定到“数据”，因为它不是“app-multi-card”的已知属性

我是棱角分明的，所以我很确定我错过了一些明显的东西。

家长TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-information-general-multi',
  templateUrl: './information-general-multi.component.html',
  styleUrls: ['./information-general-multi.component.scss']
})
export class InformationGeneralMultiComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  testData = [
    {
      "name": "bingo"
    },
    {
      "name": "notta"
    }
  ]

}

父模板

    <div class='mdl-grid mdl-grid--no-spacing'>

  <div class='mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet' *ngFor="let test of testData">
        <app-multi-card [data]="testData"></app-multi-card>
      </div>
    </div>

我没有尝试在我的子组件中调用它我应该在子组件中导入数据还是自动发生？

Answer 1

您必须在子组件中名为@Input()的属性上使用装饰器data。此属性将由绑定自动提供。

请查看相关文档：https://angular.io/guide/component-interaction

Answer 2

使用[data]="test"，如下所示：

<div class='mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet' *ngFor="let test of testData">
        <app-multi-card [data]="testData"></app-multi-card>
      </div>

另外，在app-multi-card组件ts文件中，您是否已为@Input()属性提供了data声明？

@Input() data = ''

参考https://angular.io/guide/component-interaction

Answer 3

将test代替testData放入以下句子中，并在@Input data组件中添加app-multi-card装饰器

<app-multi-card [data]="test"></app-multi-card>

Answer 4

默认情况下，组件中的所有属性都可以在组件中访问，以通过在属性前面添加装饰器@Input（）将父组件中的属性公开给需要显式提及的子组件。在你的child-component.ts

中

import Input frm @angular/core.
@Input() data;

然后您可以访问您在父组件中指定的 test 。

<div class='mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet' *ngFor="let test of testData">
    <app-multi-card [data]="test"></app-multi-card>
</div>

在ngFor循环中无法将数据传递给angular子组件？

4 个答案: