代码之家 › 专栏 › 技术社区 › cosmichero2025

不能在ngfor循环中将数据传递给角度子组件?

angular

0

cosmichero2025 · 技术社区 · 7 年前

我试图将数据“testdata”传递给子组件“multi-card”,但当我尝试这样做时,它返回这个错误。

未捕获错误:模板分析错误: 无法绑定到“data”,因为它不是“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>

我没有尝试在子组件中调用它。我应该在子组件中导入数据吗?还是自动导入?

4 回复 | 直到 7 年前

1

2

wilovent 7 年前

你得用那个装修工 @Input() 在一个名为 data 在您的孩子组件中。此属性将由绑定自动提供。

在文档中查看以下内容: https://angular.io/guide/component-interaction

2

1

lifetimeLearner007 7 年前

使用 [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

3

1

Abel Valdez 7 年前

投入 test 相反 testData 在下面的句子中添加 @Input data 室内装饰工 app-multi-card 成分

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

4

1

Avinash 7 年前

默认情况下,组件的所有属性在组件中都是可访问的,要将父组件中的属性公开给子组件,您需要在属性前面添加decorator@input()来显式说明。
在您的子组件.ts中

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

然后你可以进入测试在父组件中指定的。

<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>