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角钩来等待输入数据加载，然后对其进行处理。

文档：{{3}}

示例：

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

问题是您还没有数据。

您在控制台中看到的是评估值，该值稍后发生。如果您使用的是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);
  }
}

Answer 4

在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);
}

如果在第三个输出中未定义employee，则可以在父组件中将其清除。如果是这种情况，您可以将父级上的ngIf更新为仅在item有值时显示。

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

Answer 5

谢谢大家。你的想法给了我一个主意。我检查了一下，子组件类中的对象是STRING。我将其声明为Employee，但就像ts / js一样，运行时所有东西都可能有所不同：（。

所以解决方案是这样的：

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

我认为在输入中我们只能发送嵌入的简单类，例如字符串，数字等（在所有示例中都是这样：））

我想补充一点，此解决方案使价值在每个生命周期挂钩中都可以使用，在这里提到： onInit，OnCHange，ngAfterViewInit

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

5 个答案:

修复