Angular 4 组件中的数组。无法识别的输入参数答案

【问题标题】：Arrays in Angular 4 components. Unrecognized input parametersAngular 4 组件中的数组。无法识别的输入参数
【发布时间】：2018-02-16 00:27:35
【问题描述】：

我在使用 TypeScript 的 Angular 4 中的数组声明和字符串插值有问题。如果我创建这个类：

export class MyArrayProperty {
 property1: string;
 property2: string;
}

export class MyComponent {
 @Input() object: ComplexObject;
 myArray: MyArrayProperty[];
}

ComplexObject 是一个具有很多属性的对象：

ComplexObject {
  myNumber: number;
  myString: string;
  // etc..
}

如果我尝试在组件 MyComponent 中创建一个 MyArrayProperty 实例数组，以这种方式：

 export class MyComponent {
   @Input() object: ComplexObject;
   myArray: MyArrayProperty[] = [{
     property1: 'hello',
     property2: this.object.myString
   }];
 }

property1 字段在 HTML 页面上正确显示，字符串插值：{{myArrayInstance.property1}}（myArrayInstance 由 ngFor 获取）。但是property2 不会出现字符串插值{{myArrayInstance.property2}}，即使this.object.myString 实际上是一个字符串并且我收到了一个输入对象。这是怎么发生的，我该如何解决这个问题？

【问题讨论】：

你在哪里将对象传递给这个组件？请张贴代码

标签： html arrays json angular typescript

【解决方案1】：

您的错误原因是，在您分配this.object.myString 的那一刻，object 不可用。

您可以使用ngOnChanges()，它在每次@input 属性更改时执行，在您的情况下是object 被注入到您的组件中。

你可以这样做，

ngOnChanges (changes: SimpleChanges) {
if(this.object) {
myArray = [{
   property1: 'hello',
   property2: this.object.myString
   }];
}}

要使用ngOnChanges()，您需要为您的组件实现OnChanges 接口。

更多关于 OnChanges() here 和 Angular LifeCycle Hooks

【讨论】：

错误：“SimpleChanges”类型上不存在属性“对象”。

【解决方案2】：

首先你为什么要为MyArrayProperty 使用一个类？您只是将其用作一种类型，因此您应该使用接口。

export interface MyArrayProperty {
 property1: string;
 property2: string;
}

其次，您的代码将失败，因为您在创建组件时尝试访问成员 object 的属性 myString。但是object 在ngOnInit 之前是undefined。因此，您正在访问 undefined 的属性。

要解决您的问题，您可以使用一个 getter 来转换 object 成员以显示在您的模板中。

export class MyComponent {
  @Input()
  public object: ComplexObject;

  public get myArray() {
    return Object.keys(this.object || {}).map(key => {
       return {
         property1: 'hello',
         property2: this.object[key]
       } as MyArrayProperty;
    })
  }
}

【讨论】：