在angular 2中,从service绑定嵌套对象到ng2-smart table



我是angular 2的新手我有一个页面,其中包含一个从服务驱动的选择菜单,当选择一个项目时,我得到一个Full对象,这个对象包含子对象,我需要将这个子对象绑定到一个ng2-smart表,我怎么做呢

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> 

这里是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();
    }
  }
} 

选择的对象结构,如

对象结构

我需要在Object对象中使用types list来将它绑定到表中,

提前感谢!

我是在调用onChangeObj时发现的

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

最新更新