CODEWITHSUNDEEP
angulartypescriptnativescript
Amine Soussia
Amine Soussia

Reputation: 13

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

Upvotes: 0

Views: 874

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

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
                }
            }
        });
}

Upvotes: 1

Related Questions