Question

我创建了两个组件，父母和孩子。

父级有一个名为applications的成员变量：

import { Component, OnInit } from '@angular/core';
import { CoreService } from 'app/core.service';
import { Application } from 'app/models/application.model';

@Component({
  selector: 'app-applicationbrowser',
  templateUrl: './applicationbrowser.component.html',
  styleUrls: ['./applicationbrowser.component.css'],
  providers: [CoreService]
})
export class ApplicationbrowserComponent {
  applications: Application[] = [
    new Application(1, false, "beef"),
    new Application(2, false, "teef"),
    new Application(3, false, "feef")
  ];
  constructor() {

  }
}

并在其模板中使用子组件：

<div>
  <app-resourceitem *ngFor="let item of applications" [item]="item"></app-resourceitem>
</div>

我假设我的应用程序变量中的每个应用程序都会调用它。

但是儿童组件只有一个未定义的＆＃39;项目变量：

  @Input()
   item: any;
  constructor() {
    debugger;
    console.log(this.item); //item is always undefined....
  }

我做错了什么？

Answer 1

-put数据位于@Input，而不是构造函数。

ngOnInit

Answer 2

请勿尝试在构造函数中访问 @Input() ，请在ngOnInit生命周期挂钩中执行此操作。构造函数与Angular应用程序生命周期无关。将您的代码更改为，

@Component({
})
export class SomeChildComponent implements OnInit {
  @Input() item: any;
  constructor(){}
  ngOnInit() {
    console.log(this.item);
  }
}

<强> DEMO WITH STACKBLITZ

无法让@Input（）在构造函数中工作

2 个答案: