無法將數據向下傳遞到ngFor循環中的角度子組件？

Question

我正在嘗試將數據“ testData”向下傳遞給子組件“多卡”，但是當我嘗試這樣做時，它將返回此錯誤。

未捕獲的錯誤：模板解析錯誤：無法綁定到“數據”，因為它不是“應用程序多卡”的已知屬性

我是新手，所以我很確定自己缺少明顯的東西。

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

您必須在子組件中名為data的屬性上使用裝飾器@Input() 。 綁定將自動提供此屬性。

看看文檔： 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文件中，您是否為data屬性指定了@Input()聲明？

@Input() data = ''

請參閱https://angular.io/guide/component-interaction

Answer 3

將test代替testData放入以下sendense中，並在app-multi-card組件中添加@Input data裝飾器

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

Answer 4

默認情況下，組件的所有屬性都可以在組件內訪問，要將父組件中的屬性公開給子組件，您需要通過在屬性前面添加裝飾器@Input（）來明確提及。
在您的child-component.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>