bind nested object from service to ng2-smart table in angular 2

Question

i am new to angular 2 i have a page that contains a select menu driven from a service , when select an item i get the Full object , this object contains child object i need to bind this child to a ng2-smart table , how can i do this

this is my type.html

    <div class="widgets">
<div class="form-group">
  <label for="exampleSelect1">Types</label>
  <select [ngModel]="selectedObj" (ngModelChange)="onChangeObj($event)"  name="sel3"  class="form-control" id="exampleSelect1">
    <option [ngValue]="obj"  *ngFor="let obj of objects">{{ obj.objectName }}</option>

  </select>
</div>

 <div class="row">
    <ba-card title="Types" baCardClass="with-scroll">
      <ng2-smart-table class='form-control' [settings]="settings" [source]="source"  (deleteConfirm)="onDeleteConfirm($event)"></ng2-smart-table>

    </ba-card>
  </div>

</div> 

and this is my type.component.ts

import {Component, ViewEncapsulation} from '@angular/core';

import { CustomerTypeService } from './customerType.service';
import { LocalDataSource } from 'ng2-smart-table';
import {TypeService} from './type.service';



@Component({
  selector: 'basic-tables',
  encapsulation: ViewEncapsulation.None,
  styles: [require('./type.scss')],
  template: require('./type.html'),
    providers: [TypeService],

})
export class Type {

  query: string = '';





  settings = {
    add: {
      addButtonContent: '<i class="ion-ios-plus-outline"></i>',
      createButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',
    },
    edit: {
      editButtonContent: '<i class="ion-edit"></i>',
      saveButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',
    },
    delete: {
      deleteButtonContent: '<i class="ion-trash-a"></i>',
      confirmDelete: true
    },
    columns: {

      CustomerType: {
        title: 'Type Name',
        type: 'string'
      }

    }
  };

  source: LocalDataSource = new LocalDataSource();

    public objects: Array<any> = new Array<any>();
    public type: Array<any> = new Array<any>();
    public id : number;
      public objectsNum: number = 0;


  constructor(protected _typeService: TypeService) {
    this._typeService.getObject().subscribe((res) => {
      this.objects = res;

      this.objectsNum = (res) ? res.length : 0;
    }, error => {
      alert(error);
    });
  }
      selectedObj = this.objects;
      onChangeObj(newObj) {
    console.log(newObj);
       this.source.load(this.selectedObj)

      }


  onDeleteConfirm(event): void {
    if (window.confirm('Are you sure you want to delete?')) {
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }
} 

the selected object structure like

object strucure

i need to take types list in Object objects to bind it in the table ,

Thanks in ADVANCE!

Answer 1

i found it when calling the onChangeObj

    onChangeObj(newObj) {
    console.log(newObj);
       this.source.load(newObj.type);
}