时间戳

首页 > 解决方案 > 如何在 html 和 Angular 中创建动态表

html - 如何在 html 和 Angular 中创建动态表

问题描述

我需要在 Html 中呈现一个动态表，我不知道每行的模板是什么：有时它包含 2 列，有时包含 4...

我需要这样的东西：

    <div>
   <h1>Angular HTML Table Example</h1>
   <table>
      <thead>
         <tr>
            <th>#ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Address</th>
            <th>Action</th>
         </tr>
      </thead>
      <tbody>
         <tr *ngFor="let item of ItemsArray">
            <th>{{ item.id }}</th>
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
            <td>{{ item.phone}}</td>
            <td>{{ item.address }}</td>
           
         </tr>
      </tbody>
   </table>
</div

而不是：

<tr *ngFor="let item of ItemsArray">
        <th>{{ item.id }}</th>
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
        <td>{{ item.phone}}</td>
        <td>{{ item.address }}</td></tr>

类似的东西：

 <tr *ngFor="let item of ItemsArray">
<ngFor="let property of item.structure>  
            <td>{{ property }}</td>

你对我有什么建议吗？

谢谢

标签： htmlangulartypescript

解决方案

您可以使用以下代码和渲染标题列获取列表项的键

Object.keys(list);

这是堆栈闪电战代码

您可以在产品组件文件中看到所需的代码。我希望它适用于你的场景

推荐阅读