如何从父组件输入的对象中获取数据。

Question

我有一个父组件，它从服务中获取数据对象并将其存储在 value: item 中。

接下来，我通过 html 绑定将其发送到子组件：

<app-employee-form *ngIf="!showLoader" [employee]="item"></app-employee-form>

在子组件中我有输入注释并且我得到了员工值：

@Input() employee: Employee;

在这一点上，我的问题开始了。 当我尝试将这些数据用于：

ngOnInit() {
console.log('Test ->', this.employee);
console.log('Test for name -> ', this.employee.name);}

我在控制台中：

Test -> {"id":1,"name":"Wanda","surname":"Smith","type":"sdfkmsd","selected":false
Test for name ->  undefined

我不明白为什么我无法从属性名称（或本例中的任何其他属性）获取数据。有人可以帮帮我吗？

Answer 1

对于这个范围，你可以在你的子组件中使用 ngOnChange 角度钩子来等待输入数据加载，然后用它做一些事情。

文档：https://angular.io/api/core/OnChanges

例子：

ngOnChanges(changes:SimpleChanges) { 
            for (let propName in changes) {     
                let change = changes[propName];     
                let curVal = JSON.stringify(change.currentValue);           
                let prevVal = JSON.stringify(change.previousValue);
                console.log(curVal);   
                console.log(prevVal); 
            } 
        }

Answer 2

因为当时还没有数据。试试

if(this.employee) {
console.log(this.employee.name);
}

Answer 3

item 在console.log('Test ->', this.employee); 之后是否有可能变为空？你可以试试这个：

ngOnInit() {
console.log('Test ->', this.employee);
console.log('Test for name -> ', this.employee.name);
console.log('Test ->', this.employee);
}

如果雇员在第三个输出中未定义，那么它可能在父组件中被清除。如果是这种情况，您可以更新父级上的 ngIf 以仅在 item 具有值时显示。

<app-employee-form *ngIf="!showLoader && item" [employee]="item"></app-employee-form>

Answer 4

谢谢大家的帮助。你的想法给了我一个想法。我检查它并且我在子组件类中拥有的对象是一个字符串。 我将它声明为 Employee 但就像 ts/js 一样，在运行时一切都可能有所不同:(.

所以解决方案是这样的：

 (JSON.parse(this._employee.toString()) as Employee).name

我认为在输入中我们只能发送嵌入简单的类，如字符串、数字等（就像在所有示例中一样:)）

我想补充一点，这个解决方案在此处提到的每个生命周期钩子中都提供了价值： onInit, OnCHange, ngAfterViewInit

Answer 5

问题是您还没有数据。

您在控制台中看到的是稍后发生的评估值。如果您使用的是 chorm 控制台，那么您会看到一个黄色图标，它会提供更多信息。

修复

在 ngAfterViewInit 中访问这个值。如果您仍然无法访问，则可能是 Angualr Change Detector 循环存在问题。你也可以使用setTimeout。

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterViewInit {

  public _employee;

  get employee(): any {
     return this._employee;
  }

  @Input("employee")
  set employee(employee: any) {
     this._employee= employee;
  }

  ngAfterViewInit() {
     console.log('Test ->', this._employee);
     console.log('Test for name -> ', this._employee.name);
  }
}