0

私はAngular 2を初めて使用します。サービスから駆動される選択メニューを含むページがあります。アイテムを選択すると、フルオブジェクトが取得されます。このオブジェクトには、この子をng2-smartテーブルにバインドする必要がある子オブジェクトが含まれています。私はこれをします

これは私の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 オブジェクトの型リストを取得する必要があります。

前もって感謝します！

4

1 に答える 1

1

onChangeObj を呼び出すときに見つけました

    onChangeObj(newObj) {
    console.log(newObj);
       this.source.load(newObj.type);
}
于 2016-11-12T11:57:54.027 に答える