Arrays in Angular 4 components. Unrecognized input parameters - html

Question

I have a problem with the array declaration and the string interpolation in Angular 4 with TypeScript.
If I create this classes:
export class MyArrayProperty {
property1: string;
property2: string;
}
export class MyComponent {
#Input() object: ComplexObject;
myArray: MyArrayProperty[];
}
The ComplexObject is an Object with a lot of property:
ComplexObject {
myNumber: number;
myString: string;
// etc..
}
If I tried to create an array of instances of MyArrayProperty inside the component MyComponent, in this way:
export class MyComponent {
#Input() object: ComplexObject;
myArray: MyArrayProperty[] = [{
property1: 'hello',
property2: this.object.myString
}];
}
The field property1 is displayed correctly on the HTML page with the string interpolation: {{myArrayInstance.property1}} (myArrayInstance is obtained by ngFor).
But the property2 does not appear with string interpolation {{myArrayInstance.property2}}, even though this.object.myString is actually a string and I received an input object.
How does this happen and how can I solve this problem?

Answer 1

First of all why you're using a class for MyArrayProperty? You're just using it as a type, so you should go for an interface.
export interface MyArrayProperty {
property1: string;
property2: string;
}
Second, your code will fail because your're trying to access the property myString of the member object on component creation. But object is undefined before ngOnInit. Therefore you're accessing a property of undefined.
To solve your problem you could use a getter which transforms the object member to be displayed in your template.
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;
})
}
}

Answer 2

The reason for your error is that, the moment you are assigning the this.object.myString, the object is not available.
you can use ngOnChanges() which is executed everytime the #input property changes which in your case is object being inject in you component.
You can do something like this,
ngOnChanges (changes: SimpleChanges) {
if(this.object) {
myArray = [{
property1: 'hello',
property2: this.object.myString
}];
}}
To use ngOnChanges() you need to implement OnChanges interface to your component.
More on OnChanges() here
and
Angular LifeCycle Hooks