在 Angular 中将多个数据从父组件传递到子组件时出错

Question

我正在尝试将两个变量从父组件发送到子组件。为此，我已经在一个对象中初始化了两个数据，您可以在下面看到

export class AppComponent {
  title = 'app';
  myObj = {
    FirstInputString : 'Hello I am coming from Parent',
    SecondInputString :  'I am second value coming from parent'
  };

我已将子选择器放置到父组件视图 .html 文件中，我在其中使用 @input name myInput 将其绑定到对象名称。

<app-form-test [myInput]='myObj' (myOutput)="getData($event)"></app-form-test>

But In the child component when I am using the object value .. I am not able to access the key value of the defined object in the parent object

export class FormTestComponent implements OnInit {
  @Input() myInput: string;

  ngOnInit() {
    console.log(this.myInput.FirstInputString);
    console.log(this.myInput.SecondInputString);
  }
}

Answer 1

应用组件

export class AppComponent {
  title = 'app';
  myObj = {
    FirstInputString : 'Hello I am coming from Parent',
    SecondInputString :  'I am second value coming from parent'
  };

应用组件html

<app-form-test [myInput]="myObj" (myOutput)="getData($event)"></app-form-test>

表单测试组件

export class FormTestComponent implements OnInit {
  @Input() myInput: any;

  ngOnInit() {
    console.log(this.myInput.FirstInputString);
    console.log(this.myInput.SecondInputString);
  }
}

以上对我来说非常好。

注意：myInput: string 我将其更改为 myInput: any，尽管在运行.

时不会导致任何错误

请查找 stackblitz https://stackblitz.com/edit/angular-8skzfj?file=src%2Fapp%2Fheader%2Fheader.component.ts

在 Angular 中将多个数据从父组件传递到子组件时出错

Getting error in Passing multiple data from parent to child component in Angular

angular

angular-decorator