如何在 angular 5 中不使用 *ngFor 将数据从父组件发送到子组件

How to send data from parent component to child component without using *ngFor in angular 5

我实际上是在使用 *ngFor 来重复一个选择器,我也在向子组件发送一些数据请看下面的代码:

<app-piegraph *ngFor="let studentData of studentData" [studentData]="studentData"></app-piegraph>

父组件:

studentData = {first: "harish",second: "santhu"}

子组件:

export class PiegraphComponent implements OnInit{
  @Input('studentData') testObj;
constructor(){
console.log(this.testObj); //Getting undefined error message here
}
}

我的 studentData 中只有一个对象因此我不想重复数据,我只想将 studentData 对象发送到我的子组件而不使用 *ngFor

这可能吗???

由于您的 studentData 是一个数组,并且您确定它只有一个对象,您可以执行以下操作:

<app-piegraph [studentData]="studentData[0]"></app-piegraph>

这里我们需要记得在父组件中初始化数组,这样我们就不会在数组上出现undefined错误。

此外,您正在尝试在构造函数中控制台记录 child 中的 @Input 值,此时 @Input 值尚不可用。这可以通过将控制台日志移动到 OnInit:

来解决
export class PiegraphComponent implements OnInit{
  @Input('studentData') testObj;

  constructor(){ }

  ngOnInit() { 
    console.log(this.testObj);
  }
}