Bootstrap 4 如何使用angular 5指令填充表中的行？

我有一个屏幕截图，如下所示，我想通过angular 5指令注入行

我用来排成一行的HTML片段是：

<tr>
<td class="left">Amanda Doe</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-bill">Bill</td>
</tr>

阿曼达·多伊
250
2.
账单

我已经为上面的屏幕截图创建了一个示例，在这个示例中，我通过HTML在前端填充数据

问题陈述：

---

我想知道我需要做哪些更改，以便通过指令注入数据，可能是ngfor。我之所以决定使用指令，是因为我有大约10-12行，这将是使用指令的最佳方式

您需要在组件内创建一个对象数组，并为每个对象创建一个镜像表的结构

然后在html中，可以使用ngFor迭代该数组并打印出对象的每个值。*ngFor语法是

*ngFor=“let of

，然后使用

打印任何数据

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {
 public name = 'Angular 5';
 public myData = [
   {
    'name': 'Amanda Doe',
    'number': 250,
    'table': 2,
    'status': 'Bill'
  },
  {
    'name': 'Amanda Doe',
    'number': 250,
    'table': 2,
    'status': 'Bill'
  }];
}

然后在html中使用ngFor，如下所示：

<div class="table-responsive body-manage-attendees">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col" class="number">Number</th>
                <th scope="col" class="table2">Table</th>
                <th scope="col" class="status">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let row of myData">
                <td class="left">{{ row.name }}</td>
                <td class="number1">{{ row.number }}</td>
                <td class="table1">{{ row.table }}</td>
                <td class="right-bill">{{ row.status }}</td>
            </tr>
        </tbody>
    </table>
</div>

名称
数字
桌子
地位
{{row.name}
{{row.number}}
{{row.table}}
{{row.status}}

---

这里有一个工作示例，您也可以签出：

将每个tr中的数据作为一个对象，并将整个数据集作为一个对象数组，这样它就可以通过ngFor进行迭代@Franklin非常感谢你的建议。你能提供一个例子让我更好地理解吗？我以前从未使用过指令，所以我对此有点困惑。谢谢你的回答。你的回答对我来说很有意义。我们有没有办法只循环HTML中的数据？没有任何来自typescript的内容。没有HTML只是一种标记语言，它没有普通编程语言的能力来执行循环和条件等操作。