Question

我想让我的表连续10行。如果我的数组只有5个项目，则它必须有其余5行的值为空。

这是我输出表格的方式：

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

如何确保它总是有10行？请帮忙，谢谢！

Answer 1

例如，您需要首先检查打字稿文件中的数组大小

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

Answer 2

这是其中的一些事情，可能值得不去思索它-如果您要强制执行许多行，并且它的行数很低（例如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个的结果。

Answer 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，...]。

角度-如何循环表格行？

3 个答案: