How to pass array of the object from page to component in Ionic 3?

Question

I am developing an app, using Ionic 3 with angular 4. And I have the following problem: How can I pass an array of the object from a page, to a component? When I inform the object in my directive to the component, it is converted to a string with the following information: [Object object], [Object object], [Object object] ...

Page.html (page) code:

<ion-card *ngFor="let telemetry of listTelemetry">
    <telemetria-chart medicao="{{telemetry.medicoes}}"></telemetria-chart>
</ion-card>

Original value of 'telemetry.medicoes' :

TelemetriaChart.ts (compenent) code:

@Component({
  selector: 'telemetria-chart',
  templateUrl: 'telemetria-chart.html'
})
export class TelemetriaChartComponent {

  @ViewChild('myChart') canvas: ElementRef;

  @Input() funcionalidadeId: any;
  @Input() medicao: any [];

  text: string;

  constructor() {
    setTimeout(() => {
      console.log('this.medicao', this.medicao);
      //...do something with this.medicao     
    }, 1000);
  }
}

Result from console.log(this.medicao):

I need to get info from 'this.medicao'.

I do not understand you want to set single object from medicao array or all medicao array. And what data listTelemetry. Before you answer this questions fix these problems: [medicao]="telemetry.medicoes". You need to use [ ]. And not need to use {{ }}. Because we do not stringify it. Read here angular.io/guide/template-syntax — Roman Skydan
– Roman Skydan, Commented Oct 5, 2017 at 22:03
Thanks @RomaSkydan, I'll make a correction. I expressed myself, the doubt was so much for single object for list of object. But the list is a priority. — Erico Souza
– Erico Souza, Commented Oct 5, 2017 at 22:16
@RomaSkydan, your suggestion to switch medicao = "{{telemetry.medicoes}}" to [medicao] = "telemetry.medicoes", it worked! Thank you. Do you want to write your answer? — Erico Souza
– Erico Souza, Commented Oct 5, 2017 at 22:18

Roman Skydan · Accepted Answer · 2017-10-05 22:29:56Z

3

Change

medicao="{{telemetry.medicoes}}"

to

[medicao]="telemetry.medicoes"

Helpful link for you:

Angular Interpolation

There you can read about {{}}. Where we need use and what interpolation do with data inserted in it.

Component Interaction

And there you can read about component communication scenarios that we can use in angular2

answered Oct 5, 2017 at 22:29

Roman Skydan

5,7664 gold badges22 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

How to pass array of the object from page to component in Ionic 3?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related