无法将 Web api 服务数据绑定到 angular 中的 ng2-smart-table 2

Question

我可以访问我的服务并获取数据，但我不确定如何将它绑定到 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" 不起作用。

Answer 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);
  }

Answer 2

将 customers 替换为 source html

<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) {}

无法将 Web api 服务数据绑定到 angular 中的 ng2-smart-table 2

Not able to bind web api service data to ng2-smart-table in angular 2

asp.net-web-api

angular2-services

angular