如何在Angular 4中動態加載表格行中的數據

我正在使用angular 4爲項目創建自定義數據表格，其中表格列和行元素將動態綁定。我爲typescript文件中的列名創建了變量。如何在Angular 4中動態加載表格行中的數據

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"] 
    }); 
}

這從角度服務功能調用員工。

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

我想綁定模板文件中的數據表。這裏員工是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]}}返回空值。作爲列標題正確呈現。我從這裏嘗試了方法，但它並沒有在角4 Dynamically loading columns and data into tables in angular 2

來源

2017-08-29 forgotten.boi

這看起來不像Angular相關的，'data [column]'不包含值。我沒有看到前兩個代碼片段是如何與第三代碼中的之前的問題或部分相關的。我們需要看到的是'Employee'和'dcolumn'的內容。 –

我的歉意。我糾正了這個問題。我不確定是否可以直接更正它，或者是否需要添加編輯標籤。這是「列」而不是「dcolumn」。我希望像{{data [column.key]}}這樣的數據綁定來自每行的員工的數據。 –

這應該可行，但您的問題仍然不會顯示Employee的數據。 –

工作，你寫：

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

您發佈的代碼不定義dcolumn。可能dcolumn未定義？或者是不是string[]？

來源

2017-08-29 12:30:12 meriton

這是「列」而不是「dcolumn」。我想要{{data [column.key]}}這樣的東西來綁定每列中每行的Employee中的數據。我已經更新了這個問題。我很抱歉。即使我嘗試將字段名稱放在字符串[]格式中，但這也不起作用。 –

如何在Angular 4中動態加載表格行中的數據

回答

相關問題