如何从输入中获取数据？

Question

我有输入元素：

@Input() bObj: any;

当我尝试获取属性 this.bObj.objectareacollection:

   ngOnChanges() {
    this.administrativeArea = this.bObj.objectareacollection.reduce(function (
      accumulator,
      currentValue
    ) {
      accumulator.push(currentValue.objectarea);
      return accumulator;
    },
    []);

    console.log(this.administrativeArea);
  }

为什么我会收到此错误：

Cannot read property 'objectareacollection' of undefined

父组件：

export class BuildingObjectDetailsComponent implements OnInit {
  public objectDetails: any;
  ngOnInit() {
    this.route.params
      .pipe(
        pluck("objid"),
        tap((objid: string) => {
          this.parametersService.findbyobjectidlatestFilter.parameters.objectid = objid;
        }),
        switchMap(() =>
          this.constructionObjectsDataService.findbyobjectidlatest()
        )
      )
      .subscribe((response) => {
        this.objectDetails = response.reestrobject;
      });
  }
}

模板父项是：

<app-building-object-details-primary [bObj]='objectDetails' id="Primary">
</app-building-object-details-primary>

Answer 1

You are accessing the input value in wrong way. Try below code.

    ngOnChanges(changes: SimpleChanges) {
    if (changes.bObj.currentValue){
           let currentInputValue = changes.bObj.currentValue;
           this.administrativeArea = currentInputValue.objectareacollection.reduce(function (
      accumulator,
      currentValue
    ) {
      accumulator.push(currentValue.objectarea);
      return accumulator;
    },
    []);
    }


    console.log(this.administrativeArea);
  }

Answer 2

解决这个错误的两种方法

1) 仅在存在输入时渲染组件

如果您的子组件完全依赖于此 input 值，并且您的 objectDetails 父组件在一段时间后正在更新（即从 API 获取数据），那么您可以用 ngIf

检查一下

就像在你的父组件中一样

 <app-building-object-details-primary *ngIf="objectDetails" [bObj]='objectDetails' id="Primary">

2) 检查第一个实例的 undefined 值

在你的子组件中

if (this.bObj) {
   this.administrativeArea = this.bObj.objectareacollection.reduce(function (

哪个最适合你

如何从输入中获取数据？

How to get dats from Input?

angular

angular8