テーブルの行にデータを動的にロードする方法4

Question

テーブルの列と行の要素が動的にバインドされる角度4を使用してプロジェクトのカスタムデータテーブルを作成しています。私は、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"] 
    }); 
} 

これは、「角度サービス」機能から従業員を呼び出します。

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

IEmployeeInterfaceが

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

ある

Employee: IEmployeeInterface[]; 

の配列である私は、データを結合していたテーブルはこのようなものです。

<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[]以外のものがありますか？