What am I missing to show data in a custom component

Ionic Framework ionic-v3
1

I am trying to pass a value to a custom component
below a form that is poplated from a service I put this code to call a custom component

<fields [farmernameid]="farmername.id"></fields>

it should pass the id to the field component so that the component can ask the service for a list of fields that the farmer has. but nothing gets passed, if I remove the [] the string farmername.id gets passed, so to verify I put {{farmername.id}} in the form above the call to the component, that populates with the id of the selected farmer correctly.

so I guess I am not passing the value correctly.

in the fields.ts I have


export class FieldsComponent {
  
  @Input('farmernameid') farmerToView;
  farmer : string;
  fieldnames: any;

  constructor(private navCtrl: NavController, 
              private navParams: NavParams,
              private jobService: JobService
              ) {
    this.farmer = this.farmerToView;
// sample data until I get the farmer id to pass then will call a service to get the data
    this.fieldnames = [
        {
            "id": "####",
            "companyid": "2",
            "description": "Behind house",
            "fieldacres": 160,
            "latitude": "#######",
            "longitude": "",
            "farmerid": "####"
        },
        {
            "id": "####",
            "companyid": "2",
            "description": "Testfield",
            "fieldacres": 120,
            "latitude": "######",
            "longitude": "",
            "farmerid": "####"
        },
        {
            "id": "####",
            "companyid": "2",
            "description": "North of shed",
            "fieldacres": 80,
            "latitude": "######",
            "longitude": "",
            "farmerid": "####"
        }
    ];

}
}

and in the fields.html is

<ion-list color="light">
  <ion-list-header>
    Fields for {{farmer}}
  </ion-list-header>
  <ion-item *ngFor="let fieldname of fieldnames">
    <div>{{fieldname.description}}</div>
    <div end> {{fieldname.fieldacres}} </div>
    <div>{{fieldname.latitude}}</div>
  </ion-item>

</ion-list>

“Fields for” shows up from the html template but never {{farmer}} which it should be the id. So I am sure I missed something, I just don’t know what to look for.

2

I use Input() and Output() all the time, and I couldn’t understand your post. You might get more help if you formatted and explained it in a simpler way.

3

Ok, I reformated my question - maybe someone can help me see what I am missing.

4

You should put this code in ngOnChanges. Calling it in your constructor in a custom component probably results in no input at all. Also is there any reason for that double assignment? Wouldn’t it be nicer to just do this: @Input('farmernameid') farmer: string;

5

no - the only reason was to see how far the data got,

thanks, putting it in the ngOnChanges did the trick, now I get to write a call to the service and get real field data