@Input() 值未定义答案

【问题标题】：@Input() value is undefined@Input() 值未定义
【发布时间】：2020-08-05 07:15:09
【问题描述】：

我创建了一个带有@Input() 值的组件，但我总是得到undefind。这是我的代码：

父.html

<added-item
      [minItemValueLength]="minItemValueLength"
      [maxItemValueLength]="maxItemValueLength"
      [listOfItems]="listOfItems"
  ></added-item>

children.ts

export class AddedItemComponent implements OnInit, OnChanges{

  @Input() minItemValueLength: number;
  @Input() maxItemValueLength: number;
  @Input() listOfItems: string[];

  ngOnInit() {
    console.log(this.minItemValueLength)      // return 3 
    console.log(this.listOfItems)             // return undefined
  }
}

父.ts

export class LocationsTabComponent implements OnInit {
  listOfItems: string[];
  minItemValueLength = 3;
  maxItemValueLength = 15;

  public ngOnInit(): void {
    this.locationService.getLocations().subscribe((locations) => {
      this.getLocationsList();
      console.log(this.listOfItems)    // return Array(6)
    });
  }
  private getLocationsList() {
    this.listOfItems = this.locations.map((location: Location) => location.name);
    console.log(this.listOfItems)    // return Array(6)
  }
}

如果我在儿童中使用ngOnChanges()，那么它首先输出我：

data undefined 然后：

data Array(6)

如何在onInit 中获取此值？

非常感谢您的帮助！

【问题讨论】：

标签： angular input undefined

【解决方案1】：

该值并不总是 undefined 仅在创建组件时，这是因为您是这样传递的。

流程：

Parent 正在创建，ngOnInit 正在启动。
ngOnInit 有 Observable\Promise\Async 方法，这意味着我们不等待响应，因此该值仍然未定义。
创建子组件并执行ngOnInit。值仍未定义。
Observable\Promise\Async 方法现在终于完成了，您创建的自定义回调现在分配了值，并将值传递给子组件。所以当然 child ngOnInit 不会接受它，因为组件已经创建。

有两种解决方案：

将*ngIf="listOfItems" 放在added-item 上。
将父级装饰为async ngOnInit，将：.subscribe 更改为.toPromise 例如：await this.locationService.getLocations().toPromise...，现在父级ngOnInit 将等待响应。

【讨论】：

非常感谢您的解释！这真的很有帮助！现在我明白了所有这些过程。

【解决方案2】：

这是因为你分配了

listOfItems = ...

在异步回调方法中。

如果你想检测变化，你应该实现onChanges接口并实现相应的钩子方法。

export class AddedItemComponent implements OnInit, OnChanges{

    @Input() minItemValueLength: number;
    @Input() maxItemValueLength: number;
    @Input() listOfItems: string[];

    ngOnInit() {
        console.log(this.minItemValueLength)      // return 3 
        console.log(this.listOfItems)             // return undefined
    }
    
    ngOnChanges(changes: SimpleChanges): void {
        if (changes.listOfItems) {
            console.log(this.listOfItems)
        }
    }

}

【讨论】：

【解决方案3】：

由于您订阅了位置，您可以使用async 等待响应完全解析，否则您必须实现OnChanges 接口。

public async ngOnInit(): void {
await this.locationService.getLocations().toPromise().then((locations) => {
  this.getLocationsList();
  console.log(this.listOfItems)    // return Array(6)
});
}
private getLocationsList() {
  this.listOfItems = this.locations.map((location: Location) => location.name);
  console.log(this.listOfItems)    // return Array(6)
}

【讨论】：