Question

我正在使用angular 4为项目创建自定义数据表，其中table columns和rows元素将动态绑定。我在typescript文件中为列名创建了变量。

columns = [
    { key: 'Username', title: 'User Name', isSortable: true },
    { key: 'FullName', title: 'Full Name', isSortable: true},
    { key: 'Email', title: 'Email', isSortable: true}
];

我使用来自组件的服务调用填充了表。

constructor(private employeeService: EmployeeService, private router: Router) {
    this.Employee = [];
 }

private populateEmployee() {

    this.employeeService.getPagedEmployees(this.query).subscribe(Result => {
        this.Employee = <IEmployeeInterface[]>Result["data"],
            this.query.totalItems = Result["count"]
    });
}

这会从角度服务函数调用Employee。

getPagedEmployees(filter): Observable<IEmployeeInterface[]> {

    var jsonString = JSON.stringify(filter);
    return this.http.get(this.baseUrl + 'GetEmployeeUrl').map((response: Response) => {
        return response.json();
    })
        .catch(this.handleError);
}

我正在尝试绑定模板文件中的数据表。这里的Employee是IEmployeeInterface的数组

  Employee: IEmployeeInterface[];

其中IEmployeeInterface是

export interface IEmployeeInterface {
    Id: number,
    username: string,
    fullname: string,
    email: string
 }

我绑定数据的表就像这样。

<table class="table table-bordered table-striped table-hover dataTable">
     <tr>
        <th *ngFor="let c of columns">
            <div *ngIf="c.isSortable" (click)="SortBy(c.key)">
                {{ c.title }}
                    <i *ngIf="query.sortBy === c.key" class="fa" 
                             [class.fa-sort-asc]="query.isSortAscending"
                             [class.fa-sort-desc]="!query.isSortAscending">
                    </i>
            </div>
            <div *ngIf="!c.isSortable">
                    {{ c.title }}
            </div>
       </th>
    </tr>
  </thead>
<tbody>
    <tr *ngFor="let data of Employee" >
       <td *ngFor="let column of columns">
            {{data[column.key]}}
       </td>
    </tr>
</tbody>
</table>

{{data [column]}}返回空值。正确呈现Column标头的位置。我从这里尝试了这个方法，但它没有在角度4中工作。 Dynamically loading columns and data into tables in angular 2

Answer 1

你写道：

   <td *ngFor="let column of dcolumn">
        {{data[column]}}
   </td>

您发布的代码未定义dcolumn。可能dcolumn未定义？或者是string[]以外的其他内容？

如何在Angular 4中的表格行中动态加载数据

1 个答案: