如何在 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);
}
}
我实际上是在使用 *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);
}
}