Javascript 有4列不同项目的角度表

我正忙着做一张有棱角的桌子，一排应该是这样的：

问题是我在一行中得到相同的产品，或者一行中只有一列。看：

导出类ProductsComponent实现OnInit{
输入产品：字符串；
产品=['kaas'、'prei'、'loempia'、'wcpapier'、'bananen'、'nootjes']；
//产品=[]；
onClick_addProduct（）{
this.input_product=（document.getElementById（'input_product'））.value；
this.products.push（this.input\u产品）；
}
构造函数（）{}
恩戈尼尼特（）{
}
}

1.
2.
3.
4.
{{product}}
{{product}}
{{product}}
{{product}}

我建议使用

divs

而不是

表格

，这不是表格数据

试试这个：

<div class="product" *ngFor="let prod of products">
  {{prod}}
</div>

---

我建议使用

divs

而不是

表格，这不是表格数据

试试这个：

<div class="product" *ngFor="let prod of products">
  {{prod}}
</div>

我更改了数据（实际对象）

产品现在看起来如下所示：

  products = [{name:"tire1", line:"impressive"},{name:"brand X", line: "economy plus"},
  {name:"hard plasticos",line:"urban destroyer"},{name:"happy ride", line:"smooth and sticky"}]

在角度上：

*ngFor只是一个foreach循环：因此，
products make row中的foreach产品看起来像：

<tr *ngFor="let product of products"  >
     <td >{{product.line}}</td>
     <td >{{product.name}}</td>
</tr>


{{product.line}}
{{product.name}
我更改了数据（实际对象）

产品现在看起来如下所示：

  products = [{name:"tire1", line:"impressive"},{name:"brand X", line: "economy plus"},
  {name:"hard plasticos",line:"urban destroyer"},{name:"happy ride", line:"smooth and sticky"}]

在角度上：

*ngFor只是一个foreach循环：因此，
products make row中的foreach产品看起来像：

<tr *ngFor="let product of products"  >
     <td >{{product.line}}</td>
     <td >{{product.name}}</td>
</tr>


{{product.line}}
{{product.name}
能否添加一个您正在使用的JSON示例？products是一个字符串数组，如果不是基于此，您希望发生什么情况？@AustinFrench，没有什么特别的，如果我可以复制和粘贴一些相关数据，那么在我创建StackBlitz时就更容易了。你能添加一个你正在使用的JSON的示例吗？产品是一个字符串数组，你会期望发生什么不基于此的情况？@AustinFrench没什么特别的，如果我可以复制和粘贴一些相关数据，那么在我创建StackBlitz时就更容易了。啊，我明白你的意思了！谢谢，事实上我想错了。。我明白你的意思了！谢谢，事实上我想错了。。嗯，实际上很好，谢谢！我将用它来改进和添加一些模拟JSON数据。实际上看起来不错，谢谢！我将使用它来改进和添加一些模拟JSON数据。