Angular 访问使用@Input decorator传递的数据

我有一个子组件，看起来像这样

子组件

@Component({
   selector: 'child-component',
   //TemplateUrl, Styles and Providers
})

export Class ChildComponent implements OnInit{
  @Input()
  arrayToGet; //An array that I want to pass from Parent to child

  ngOnInit(){
     console.log('The Array I got is ', this.arrayToGet); //Undefined, Tried even with setTimeout
  }

  //A bunch of methods to work with the array I get
}

@Component({
   selector: 'parent-component',
   template: '<div>
                <child-component [arrayToGet]="models"></child-component>
              </div>',
   //A bunch of Styles and Providers
})

export class ParentComponent{
   models;

   constructor(......){}

   ngOnInit(){
      //Get an array from a service assign to this.models;
   }
}  

父组件

@Component({
   selector: 'child-component',
   //TemplateUrl, Styles and Providers
})

export Class ChildComponent implements OnInit{
  @Input()
  arrayToGet; //An array that I want to pass from Parent to child

  ngOnInit(){
     console.log('The Array I got is ', this.arrayToGet); //Undefined, Tried even with setTimeout
  }

  //A bunch of methods to work with the array I get
}

@Component({
   selector: 'parent-component',
   template: '<div>
                <child-component [arrayToGet]="models"></child-component>
              </div>',
   //A bunch of Styles and Providers
})

export class ParentComponent{
   models;

   constructor(......){}

   ngOnInit(){
      //Get an array from a service assign to this.models;
   }
}  

@组件({
选择器：“父组件”，
模板：'
',
//一组样式和提供者
})
导出类ParentComponent{
模型；
构造函数（……{}
恩戈尼尼特（）{
//从分配给此的服务获取数组。模型；
}
}  

问题是我无法在我的

ChildComponent

中的

arrayToGet

上执行任何操作。但是，我能够在我的

ChildComponent

的HTML中使用

arrayToGet

上的属性

---

有什么想法吗

无论何时尝试使用

@Input

装饰器将数据从

父项

传递到

子项

，并且在

子项

初始化时传递数据不可用，最好使用

设置器

，而不是直接绑定到

子项

组件中的变量。每当父组件中的数据更新时，使用

setter

将更新子组件VARABLE

export Class ChildComponent implements OnInit{
  arrayToGet; //An array that I want to pass from Parent to child

  ngOnInit(){
     console.log('The Array I got is ', this.arrayToGet); //Undefined, Tried even with setTimeout
  }

  @Input('arrayToGet')
  set _arrayToGet(data: Array) {
     this.arrayToGet = data;
     console.log(this.arrayToGet);
  }

  //A bunch of methods to work with the array I get
}

---

无论何时尝试使用

@Input

装饰器将数据从

父级

传递到

子级

，并且传递数据在

子级

初始化时不可用，最好使用

设置器

，而不是直接绑定到

子级

组件中的变量。每当父组件中的数据更新时，使用

setter

将更新子组件VARABLE

export Class ChildComponent implements OnInit{
  arrayToGet; //An array that I want to pass from Parent to child

  ngOnInit(){
     console.log('The Array I got is ', this.arrayToGet); //Undefined, Tried even with setTimeout
  }

  @Input('arrayToGet')
  set _arrayToGet(data: Array) {
     this.arrayToGet = data;
     console.log(this.arrayToGet);
  }

  //A bunch of methods to work with the array I get
}

试试这个：

parent.component.html

<child-component [arrayToGet]="models"></child-component>

试试这个：

parent.component.html

<child-component [arrayToGet]="models"></child-component>

---

父组件从不初始化模型。所以它是未定义的。您的代码中只包含一条注释。评论没有任何作用。如果您想让我们解释为什么您的实际代码会以这种方式运行，请发布您的实际代码。我猜你不理解异步的原理。但这只是猜测。实际代码非常庞大。所以我想把它抽象出来，这样就不那么麻烦了。我发布的代码给出了发生什么的想法。不，没有。您不需要发布所有庞大的真实代码。只有一个再现问题的最小完整示例。您发布的代码再现了这个问题，但我怀疑实际代码中的问题是否相同，因为实际代码可能会以某种方式初始化模型。请参阅演示应用程序此处您的父组件从未初始化模型。所以它是未定义的。您的代码中只包含一条注释。评论没有任何作用。如果您想让我们解释为什么您的实际代码会以这种方式运行，请发布您的实际代码。我猜你不理解异步的原理。但这只是猜测。实际代码非常庞大。所以我想把它抽象出来，这样就不那么麻烦了。我发布的代码给出了发生什么的想法。不，没有。您不需要发布所有庞大的真实代码。只有一个再现问题的最小完整示例。您发布的代码再现了这个问题，但我怀疑您的真实代码中的问题是否相同，因为真实代码可能会以某种方式初始化模型。请参阅此处的演示应用程序