Javascript 如何在IBM carbon表中添加动态数据？

我正在使用并试图使用来自api的动态数据创建数据表，该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>

我已经尝试了上面的代码，但是表中没有显示只有

中显示的部分。有人能帮我吗

---

角碳没有合适的文档。只有他们在userstory和文档中提供的理论。没有举例说明。角碳很难理解。希望他们能在一个地方提供足够的材料。

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

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