Cannot read property of undefined inside the row expansion

Question

Befote I wrote this question I checked most of similar cases to mine, but with no success. I'm trying to display number and auth inside expandable row - I'm using PrimeNG. No matter what I try, nothing works. Since I'm out of fuel for this problem I need your help.

Simplified code:

JSON

{
"status": 0,
"dallases": [{
    "vehicle_id": 17954,
    "dallassettings": "3",
    "dallasupdated": "False",
    "dallas_list": [{
        "number": 666111222,
        "auth": 3
    }, {
        "number": 666777888,
        "auth": 4
    }, {
        "number": 123454321,
        "auth": 4
    }]
}
}

Service

export class VehicleService {
    private defUrl = 'dummy.url';

constructor(private http: Http) { }
getVehicle(username?: string, password?: string) {
    const url = (!username || !password) ? this.defUrl : 'dummy.url' + username + '/' + Md5.hashStr(password);
    return this.http.get(url)
        .map(res => res.json());

Component

export class VehicleComponent implements OnInit {

  cols: any[];

  ngOnInit() {
    this.cols = [
      { field: 'vehicle_id', header: "Vehicle ID" },
      { field: 'dallassettings', header: 'Dallas settings' },
      { field: 'dallasupdated', header: 'Dallas updated' },
      { field: 'dallas_list', header: 'Dallas list' }
    ];

  public vehicles: GeneralVehicle[];

  constructor(private vehicleService: VehicleService, private router: Router) {
    this.vehicleService.getVehicle().subscribe(vehicle => {
      this.vehicles = vehicle;
    });
  }

interface GeneralVehicle {
  status: number;
  dallases: Vehicle[];
}

interface Vehicle {
  vehicle_id: number;
  dallassettings: string;
  dallasupdated: string;
  dallas_list: DallasList[];
}

interface DallasList {
  number: number;
  auth: number;
}

Template


    
        List of vehicles: {{currentUser}}
        
        
        
        
         
            
                
                    
                        
                            
                                Number: 
                                {{dallas_list.number}}
                            
                            
                                Auth: 
                                {{dallas_list.auth}}

I'm expecting to be able to display all numbers and auths for each of the rows inside the expendable row.

Mario Petrovic · Accepted Answer

You are not using ng-template variable correctly:

 
    
        List of vehicles: {{currentUser}}
        
        
        
        
         
            
                
                    
                        
                            
                                Number: 
                                {{list.number}}
                            
                            
                                Auth: 
                                {{list.auth}}

Edit

The changes were made inside ng-template. let-vehicle is a reference to the current item in the iteration of the rows done by PrimeNG. Previously it was let-vehicle="value.dallas_list". This was wrong since that was reference to the whole list. You need only one as said before.

Than *ngFor was added to

to iterate through current dallas_list and print list.number and list.auth inside html:


 
        Number: 
        {{list.number}}
    
    
        Auth: 
        {{list.auth}}

Cannot read property of undefined inside the row expansion

Answers (2)

Related Questions