Javascript 如何使用typescript指定固定表行

我使用表来显示数据，对于数据，我使用Api

Api数据如下所示：

{
 "data": [
    {
        "id": "1",
        "name": "name1",
        "label": "label1"
    },
    {
        "id": "2",
        "name": "name2",
        "label": "label2"
    },
    {
        "id": "3",
        "name": "name3",
        "label": "label3"
    }
   ]
}

html代码

 <table class="table table-striped">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Label</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of sample;">
        <td>{{data.id}}</td>
        <td>{{data.name}}</td>
        <td>{{data.label}}</td>
      <tr>
    <tbody>
   <table>

身份证件
名称
标签
{{data.id}
{{data.name}
{{data.label}

---

我需要10个表行静态（固定）。表数据来自API。例如，Api包含2个数据。。。然后UI表应该有2行数据，并与雇员行平衡。。。但应显示10行（必填）

---

这意味着在UI中，我需要10行来自Api的数据，余额应该为空。

您可以在视图层、ts层甚至后端Api层中进行修复（不推荐）

在视图层中，若您在数据上循环，则可以计算数据大小是否超过任意阈值，若不超过任意阈值，则可以再次循环以显示尽可能多的空行

在ts层中，当您从api接收数据时，您可以通过向数组中添加所需数量的空项来修改传递给视图的变量
重要的是，如果您使用null，那么您必须使用例如elvis运算符来检查它
我建议agains向数组中添加一个所有属性都设置为null的对象，因为这样一来，这些属性就很难与API中的有效数据区分开来，例如，您可以使某些行具有交互性，即使它们不应该具有交互性

constdatafromapi=[{“id”：“1”，“name”：“name1”}，{“id”：“2”，“name”：“name2”}]
const minRowsNumber=10；
const diff=minRowsNumber-dataFromApi.length；
常量viewTableData=diff>0？concat（新数组（diff.fill（null））：dataFromApi；
console.log（viewTableData）

关于所需结果的实现，确切的问题是什么？您想将表固定为10行吗？那么“平衡”从何而来？我需要10个表行静态（固定）。表数据来自API。例如，Api包含2个数据。。。然后UI表应该有2行数据，并与雇员行平衡。。。但应该显示10行（必填）您是在循环行还是在表中使用库的第三方组件？不在表中使用任何库。。现在我编辑了这个问题，在那里我给出了我使用的表格html代码，你想要总共十行，即使API中的数据或多或少都是。正当