无法将 Web api 服务数据绑定到角度 2 中的 ng2-smart-table答案

【问题标题】：Not able to bind web api service data to ng2-smart-table in angular 2无法将 Web api 服务数据绑定到角度 2 中的 ng2-smart-table
【发布时间】：2018-01-21 08:41:03
【问题描述】：

我能够访问我的服务并获取数据，但我不确定如何将其绑定到 ng2-smart-table。我需要以网格视图的结构显示数据。

组件代码：table.component.ts

@Component({
selector: 'ngx-table',
templateUrl: './table.component.html',  
styleUrls: ['./table.component.scss'],
providers: <any>[TableDataService]
})
export class TableComponent {
source: LocalDataSource;
settings = {
add: {
addButtonContent: '<i class="nb-plus"></i>',
      createButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },
    columns: {
      id: {
        title: 'ID',
        type: 'number',
      },
      firstName: {
        title: 'First Name',
        type: 'string',
      },
      lastName: {
        title: 'Last Name',
        type: 'string',
      },
      username: {
        title: 'Username',
        type: 'string',
      },
      email: {
        title: 'E-mail',
        type: 'string',
      },
      age: {
        title: 'Age',
        type: 'number',
      },
    },
  };


  private customers:Customer[] = [];
  private errorMessage:any = '';

  constructor(private tableDataService: TableDataService){
    this.source = new LocalDataSource();
     this.tableDataService.getCustomerData()
   .subscribe(customers => this.customers = customers,
     error => this.errorMessage = <any>error);
     debugger;
     this.source.load(this.customers); 
  }      

}

HTML 代码：table.component.html

<nb-card-body>
<ng2-smart-table [settings]="settings" [source]="customers" (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>

服务代码：table.service.ts

     getCustomerData():Observable<Customer[]> {
    return this.http.get('http://localhost:51654/api/Customer/')
        .map(this.extractData)
        .catch(this.handleError);
} 
private extractData(res:Response) {
    let body = res.json();
    return body || [];
}

private handleError(error:any) {

    let errMsg = (error.message) ? error.message :
    error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
}

我可以单独访问价值客户到 html 页面，但是当我分配给 ng2-smart-table 时，source="customers" 不起作用。

【问题讨论】：

标签： angular asp.net-web-api angular2-services

【解决方案1】：

试试吧：

source: LocalDataSource = new LocalDataSource();
errorMessage: string;
constructor(private service: TableDataService) {
  this.service.getAdvertises()
      .subscribe(data => {
        this.source.load(data);
      }, error => this.errorMessage = <any>error);
  }

【讨论】：

【解决方案2】：

将html 中的customers 替换为source

<ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>

如果仍有问题，也试试这个

从服务中获取数据后，如下所示加载它

  setTimeout(() => {
    this.source.load(yourdata);
    this.cd.markForCheck();
  }, 0);

而且你需要注入ChangeDetectionRef

 constructor(private cd: ChangeDetectorRef) {}

【讨论】：