Angular - 如何循环表格行？答案

【问题标题】：Angular - How do I loop table rows?Angular - 如何循环表格行？
【发布时间】：2019-04-02 09:59:37
【问题描述】：

我想循环我的表以获得恒定的 10 行。如果我的数组只有 5 个项目，则其余 5 行必须为空值。

这就是我输出表格的方式：

<tr *ngFor="let item of items">
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>
     <td>{{item.desc}}</td>
</tr>

如何确保它始终有 10 行？请帮忙，谢谢！

【问题讨论】：

标签： html angular6

【解决方案1】：

这是可能值得不要过度考虑的事情之一 - 如果您想强制执行一些行，并且它是一个较低的数字，例如 10，那么您可以像这样明确地对表进行编码：

<tr>
    <td>{{items[0].id}}</td>
    <td>{{items[0].name}}</td>
    <td>{{items[0].desc}}</td>
</tr>
<tr>
    <td>{{items[1].id}}</td>
    <td>{{items[1].name}}</td>
    <td>{{items[1].desc}}</td>
 </tr>
...

Angular 应该优雅地处理空值。

但是，如果您想动态更改数字等，一个更好的解决方案是您可以在模型中简单地用空值填充数组。

您可以为此使用Array.fill。

像这样：

if(array.length < 10){
    array = array.fill(null,array.length, 10);
}

同样，您可以轻松地truncate an array 获得超过 10 个的结果。

【讨论】：

【解决方案2】：

例如，您需要先检查 typescript 文件中的数组大小

 array:any=[];
DataAssign(){
       array=//your data;
      now check the array size
     if(array.length<=5){   
   now make object fo array and push ex
   for(int i=0; i<=(array.length-10); i++)
   {
    let obj={id:"",name:"",desc:""};
     array.push(obj);
    }
    }
     }

【讨论】：

谢谢，您的解决方案也可以，但 Chris 的解决方案很简单

【解决方案3】：

试试这个。

<tr *ngFor="let index of [0,1,2,3,4,5,6,7,8,9]">
 <td>{{items[index]?.id}}</td>
 <td>{{items[index]?.name}}</td>
 <td>{{items[index]?.desc}}</td>
</tr>

您可以使用 Array.fill 代替 [0,1,2,3,...]。

【讨论】：