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

【问题标题】：How to send data from parent component to child component without using *ngFor in angular 5如何在 Angular 5 中不使用 *ngFor 将数据从父组件发送到子组件
【发布时间】：2018-06-08 20:43:16
【问题描述】：

我实际上是在使用 *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

这可能吗？？？

【问题讨论】：

为什么不想用ngFor 能不能补充一下原因。
是的，这是可能的。您甚至在发布问题之前尝试过吗？ :D
我确实添加了不使用 ngFor 的原因。那是因为我的 studentData 中只有一个对象，因此我不想用 ngFor 重复它，我只想直接发送它@Aravind
是的，我确实尝试过但找不到确切的解决方案，我搜索的许多页面都提供了 *ngFor @AJT_82 的示例
谢谢，避免使用同名

标签： angular angular-components

【解决方案1】：

因为你的studentData 是一个数组，你肯定知道它只有一个你可以做的对象：

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

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

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

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

  constructor(){ }

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

【讨论】：