代码之家 › 专栏 › 技术社区 › Harish

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

angular-components angular

Harish · 技术社区 · 7 年前

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

这可能吗???

1 回复 | 直到 7 年前

AT82 7 年前

自从你 studentData 是一个数组,您可以确定它只有一个可以执行的对象:

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

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

此外,您正在尝试控制台日志 @Input 值,此时 @输入 值尚不可用。可以通过将控制台日志移动到 OnInit :

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

  constructor(){ }

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前