Passing custom object through @Input?

Ionic Framework ionic-v3
1

Hi, i’m facing some problem in pass an object to a custom component.
I can pass a string, but not a custom object. It’s probably some silly mistake :flushed:

custom component

import {Component, Input } from '@angular/core';
import {Item} from '../../models/item';
@Component({
  selector: 'extrato-wrapper',
  templateUrl: 'build/components/extrato-wrapper/extrato-wrapper.html',
})
export class ExtratoWrapper {
  @Input(param_a) items: Item[];
  constructor() {
  }
}

item-wrapper.html has a list with ngFor like this.
<button ion-item *ngFor="let item of items>

And home.html
<extrato-wrapper [param_a]=items></extrato-wrapper>

For test purpose, I also include a list with the same object, so I can ensure my object is not null

<extrato-wrapper [param_a]=items></extrato-wrapper>
<ion-list> <!-- testing if my object is null -->
    <ion-list-header>
        <ion-row>
            <ion-col>id</ion-col>
            <ion-col>Data</ion-col>
            <ion-col>Lançamento</ion-col>
            <ion-col>Valor</ion-col>
        </ion-row>
    </ion-list-header>
    <button ion-item *ngFor="let extrato of extratos" (click)="gotoDetalhes($event, extrato)">
        <ion-row>
            <ion-col>{{extrato.id}}</ion-col>
            <ion-col>{{extrato.data}}</ion-col>
            <ion-col>{{extrato.lancamento}}</ion-col>
            <ion-col>{{extrato.valor}}</ion-col>
        </ion-row>
    </button>
</ion-list>

home.ts

import { Component } from '@angular/core';
import { NavController, NavParams  } from 'ionic-angular';`
import { ExtratoWrapper } from '../../components/extrato-wrapper/extrato-wrapper';
import { Extrato } from '../../models/item';
import { ExtratoService } from '../../providers/extrato-service/extrato-service';
@Component({
    templateUrl: 'build/pages/home/home.html',
    directives: [ExtratoWrapper],
    providers: [ExtratoService]
})
export class HomePage {
    extratos: Extrato[];
    constructor(public nav: NavController, navParams: NavParams, private extratoserv: ExtratoService) {
        extratoserv.load()
            .then(extratos => this.extratos = extratos)
            .then(extratos => console.log(this.extratos))
    }
}
2

Try:
<extrato-wrapper [param_a]="items"></extrato-wrapper>

3

Thanks, but already tried it before and doesn’t work.

4

Can I see home.ts where you declare the ‘items’ variable?

5

@pe1 I edited my post to include home.ts

6

There is no ‘items’ variable in the home.ts, but we have ‘extractors’ so change a little home.html:

<extrato-wrapper [param_a]="extractors"></extrato-wrapper>

and change type of items in the custom component:

@Input(param_a) items: Extrato[];

7

Oh, it was a mistake in copy/past to forum :flushed:, but I found the problem.

@Input(param_a) items: Item[];
<extrato-wrapper [items]=“items”>

I was using the same name for my object variable and for the input variable (even using the param_a) , now i changed to this and is working

@Input(param_a) items_in: Item[];
<extrato-wrapper [items]=“items”>

thanks for all help @pe1