TypeError: Cannot read property 'libelle' of undefined

Error: TypeError:Cannot read proprety 'libelle of undefined file:

this searche.html

import { Component,OnInit } from "@angular/core";
import { Router,NavigationExtras } from "@angular/router";
import observable = require("data/observable");
import { VoitureService } from "../../voiture/voiture.service";


@Component({
selector: "searche",
moduleId:module.id,
templateUrl: './searche.html',
providers: [VoitureService]

})
export class SearcheComponent {
    public constructor(private router:Router,private postsService:VoitureService) { 
}
voitures: voiture[];
clients:voiture;
req:string='1';
DT:Date;
idClient:number=0;
refClient:string="";
libelleClient:string;


ngOnInit(){
    this.postsService. getPosts(this.req)
    .subscribe(results => this.voitures=results );
        }

    public clicked(IDV:string,LDV:string,RDV:string){
    this.postsService. getClient(IDV)
    .subscribe(results => this.clients=results );
    this.libelleClient=this.clients.libelle;
    this.refClient=this.clients.ref;
    let navigationExtras: NavigationExtras = {
        queryParams:{
            libClient: this.libelleClient,
            refclient : this.refClient,

        }
    }
        this.router.navigate(["page1"], navigationExtras);
}
}


interface voiture{
id:number;
libelle:string;
ref:string;
}

this searche.html

<stackLayout  class="searcheview">
<stackLayout>

    <SearchBar class="input"  hint="MAchine" ></SearchBar>
        <ListView [items]="voitures" >
            <ng-template let-voiture="item">
                <StackLayout   rows="auto, auto"  columns="*, auto" class="list-group-item"  (tap)="clicked(voiture.id,voiture.libelle,voiture.ref)">
                    <Label   text="{{ voiture.id }}" row="0" col="0"></Label> 
                    <Label   text="{{ voiture.libelle }}" row="0" col="0"></Label> 
                    <label text="{{ voiture.ref }} " row="1" col="0"></label>
                </StackLayout>
            </ng-template>
        </ListView>
</stackLayout>
</stackLayout>

when i call function clicked() im getting the error TypeError: Cannot read property 'libelle' of undefined please help


ANSWERS:


The error is self-explanatory - this.clients is undefined at the moment you are referencing it. This is because you are subscribed to an asynchronous call and you should do your assigning operation inside subsribe. Possible reason for your error is because the code snippet is not formatted properly, which prevents the easy reading of your code scopes. As a recommendation use the proper indent and avoid using the short syntax for callbacks and fallbacks.

e.g.

public clicked(IDV: string, LDV: string, RDV: string) {
    this.postsService.getClient(IDV)
        .subscribe(results => {
            this.clients = results;

            this.libelleClient = this.clients.libelle;
            this.refClient = this.clients.ref;

            let navigationExtras: NavigationExtras = {
                queryParams: {
                    libClient: this.libelleClient,
                    refclient: this.refClient
                }
            }
        });
}


 MORE:


 ? NativeScript TAB button double functionalaty
 ? Make NativeScript ScrollView and TextView inside GridLayout work together (only iOS)
 ? Http request on NativeScript not working after add Arbitrary Loads on Info.plist
 ? Change the color of a switch
 ? Change the color of a switch
 ? Change the color of a switch
 ? How to change the color of statusbar in iOS and Android with NativeScript
 ? Button font in difference color
 ? NativeScript—Cannot change iOS status bar color since 2.0
 ? NativeScript Sample App takes 2.36 seconds just to see simple changes