My question is, how do I pass an Array of items as a data-binding value?

In my case I give my angular component via @Input() an Array of IValues.
But when I check the the @Input() variable that should've received the array it just prints out an Array of objects and not an Array of IValues eventhough I gave it the type IValues.

Component (FoodListPage) with data:

export class FoodListPage implements OnInit {
  foods: IValues[]; // <-- My data to pass
  category: string;

  constructor(private router: Router) {
    this.category = this.router.getCurrentNavigation().extras.state.categoryName; 
    this.foods = this.router.getCurrentNavigation().extras.state.values;
    console.log("food-list-data: ", this.foods);
  }

  ngOnInit() {}
}

The html of the component FoodListPage

<ion-content>
  <app-header title="{{category}}"></app-header>
  <app-food-listing values="{{foods}}"></app-food-listing> <!-- Here I pass the value (array of IValues) -->
  <app-nav-button page="main-menu"></app-nav-button>
</ion-content>

FoodListingComponent that should receive the value (array of IValues)

export class FoodListingComponent implements OnInit {
  @Input() values: IValues[];

  constructor() { }

  ngOnInit() {
    console.log("food-listing-data: ", this.values); //Console log (actual)
  }
}

Expected data: (4) [{…}, {…}, {…}, {…}] <-- Are all from type IValue
Actual data: [object Object],[object Object],[object Object],[object Object] <-- Are just from the type "Object"...

CodePudding user response：

Please check the below stackblitz, you need to pass non primitive types such as array and objects using the angular property binding [values]="foods" only then the type will be maintained.

<ion-content>
  <app-header [title]="category"></app-header><!-- changed here -->
  <app-food-listing [values]="foods"></app-food-listing> <!-- changed here -->
  <app-nav-button page="main-menu"></app-nav-button>
</ion-content>

forked stackblitz

CodePudding user response：

can you change

   this.foods = this.router.getCurrentNavigation().extras.state.values;

to

   this.foods = this.router.getCurrentNavigation().extras.state.values as IValues[];

I think the problem is not with the @input. Type is lost when you get the values from the route.