javascript - 如何在 Angular 中将动态数据添加到 IBM 碳表？

Question

我正在使用carbon-component-angular并尝试使用来自看起来像这样的 api 的动态数据创建数据表。

const data = [
{
    id: 0,
    firstName: "Name 1",
    lastname: "Lastname 1",
    contactNo: "287785452",
    gender: "male",
    age: "30",
    dateOfBirth: "12/08/1990",
    address: "Austrailia"
  },    
  {
    id: 1,
    firstName: "Name 2",
    lastname: "Lastname 2",
    contactNo: "287785452",
    gender: "male",
    age: "30",
    dateOfBirth: "12/08/1990",
    address: "France"
  }
]

我的 HTML

<ibm-table-container>
  <ibm-table-header>
    <h4 ibmTableHeaderTitle>All user's profiles</h4>
    <p>List of all user's Profile</p>
  </ibm-table-header>
  <ibm-table-toolbar [model]="model">
    <ibm-table-toolbar-content>
      <ibm-table-toolbar-search
        (change)="searchValueChange($event.value)"
        [expandable]=" true "
      >
      </ibm-table-toolbar-search>
    </ibm-table-toolbar-content>
  </ibm-table-toolbar>

  <ibm-table [model]="model">No Data </ibm-table>
  <ibm-pagination
    [model]="model "
    [itemsPerPageOptions]="itemsPerPageOptions "
    (selectPage)="selectPage($event) "
  >
  </ibm-pagination>
</ibm-table-container>

我在 component.ts 文件中定义的标头和数据

import {
  TableModel,
  TableHeaderItem,
  TableItem,
  PaginationModel,
} from "carbon-components-angular";

export class UserProfileComponent implements OnInit {
model = new TableModel()

ngOnInit(){

     this.model.header = [
      new FilterableHeaderItem({
        data: "Unique Id",
        filterTemplate: this.filter,
        filterFooter: this.filterFooter,
      }),
      new TableHeaderItem({ data: "Name" }),
      new TableHeaderItem({ data: "Place" }),
    ]; 
    
    let newData = [];

    //this.data from above data array
    for (let profile of this.data) {
      newData.push(
        new TableItem({ data: profile.id }),
        new TableItem({ data: profile.firstName }),
        new TableItem({ data: profile.address }),
      );
    }
    this.model.data = newdata;
 }
}

我已经尝试了上面的代码，但表格没有显示仅显示的部分<ibm-table-header>。有人可以帮我吗？

用于角度文档的碳组件（表）

标签： javascriptangularangular8carbon-design-system

Answer 1

async ngOnInit(){

     this.model.header = [
      new FilterableHeaderItem({
        data: "Unique Id",
        filterTemplate: this.filter,
        filterFooter: this.filterFooter,
      }),
      new TableHeaderItem({ data: "Name" }),
      new TableHeaderItem({ data: "Place" }),
    ]; 
    
    let newData = [];

    //this.data from above data array
    await for (let profile of this.data) {
      newData.push(
        new TableItem({ data: profile.id }),
        new TableItem({ data: profile.firstName }),
        new TableItem({ data: profile.address }),
      );
    }
    this.model.data = newdata;
 }
}