Angular : Data-Binding with Array as a value

Question

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"...

What does Array of objects and not an Array of IValues mean? — Eldar
– Eldar, Commented Sep 8, 2022 at 11:40
@Eldar the array of objects really is just an array of type Object. But I want my array of type IValues, but somehow the data gets worse after transferring. — HereToLearn
– HereToLearn, Commented Sep 8, 2022 at 12:05

Naren Murali · Accepted Answer · 2022-09-08 12:05:41Z

1

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

answered Sep 8, 2022 at 12:05

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kelum Bandara · Accepted Answer · 2022-09-08 11:54:28Z

0

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.

answered Sep 8, 2022 at 11:54

Kelum Bandara

4784 silver badges10 bronze badges

1 Comment

HereToLearn Over a year ago

The route works fine, the data transfer via the data-binding is causing the issue I guess.

Collectives™ on Stack Overflow

Angular : Data-Binding with Array as a value

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related