无法将数据向下传递到ngFor循环中的角度子组件？

Question

I'm trying to pass the data "testData" down to the child component 'multi-card' but when I attempt to do so it returns this error.

Uncaught Error: Template parse errors: Can't bind to 'data' since it isn't a known property of 'app-multi-card'

I'm new to angular so I'm pretty sure I'm missing something obvious.

Parent 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"
    }
  ]

}

Parent Template

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

I haven't tried to call it in my child component am I supposed to import the data in child component or does that happen automatically?

Answer 1

You have to use the decorator @Input() on a property called data in your child component. This property will be fed automatically by the binding.

Have a look in the documentation for this : https://angular.io/guide/component-interaction

Answer 2

Use [data]="test" as follows:

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

Also, in app-multi-card component ts file, have you given @Input() declaration for data property?

@Input() data = ''

Refer 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

By default all the properties of the component are accessible within the component, to expose the property in a parent component to child component you need to explicitly mention by adding a decorator @Input() infront of the property.
In your child-component.ts

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

then you can access test which you are assigning in the parent-component.

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