角度 6：如何使用 ngfor 制作可扩展表？答案

【问题标题】：angular 6: How to make expandable table with ngfor?角度 6：如何使用 ngfor 制作可扩展表？
【发布时间】：2018-12-13 00:33:27
【问题描述】：

我有一个角度为 6 的表格。这是工作查找，但我想在 ngfor 中使用它，但它没有按预期工作。这是表格：

  .hiddenRow {
    padding: 0 !important;
}

<table class="table table-condensed" style="border-collapse:collapse;">
    <thead>
      <tr>
        <th>#</th>
        <th>Date</th>
        <th>Description</th>
        <th>Credit</th>
      </tr>
    </thead>
    <tbody>
        <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle" style="cursor: pointer;">
          <td>1</td>
          <td>05 May 2013</td>
          <td>Credit Account</td>
          <td class="text-success">$150.00</td>
        </tr>
        <tr>
          <td colspan="12" class="hiddenRow">
            <div class="accordian-body collapse jumbotron" id="demo1">
              Demo1
            </div>
          </td>
        </tr>
    </tbody>
  </table>

除了我想包含*ngFor 以便循环许多元素之外，这是有效的发现。任何想法？

【问题讨论】：

发布你想要循环的数组\
@SachilaRanawaka 我在具有完全相同行的简单数组上循环，例如 [0, 1, 2, 3]
这是stackoverflow.com/questions/26588753/… 的重复吗？使用手风琴而不是隐藏行？

标签： html angular

【解决方案1】：

用这个代替你想为每一行重复的表格行

<tr *ngFor="for row of rows">
  <td> {{row.id}} </td>
  <td> {{row.date}} </td>
  <td> {{row.desc}} </td>
  <td> {{row.credit}} </td>
</tr>

（此代码未经测试）

【讨论】：

我要重复到行，请仔细看我的表。

【解决方案2】：

更新

试试这个：

<table class="table table-condensed" *ngFor="let l of list_name" style="border-collapse:collapse;">
    <thead>
      <tr>
        <th>#</th>
        <th>Date</th>
        <th>Description<th>
        <th>Credit</th>
      </tr>
    </thead>
  ...

你可以用你想要的长度迭代一个数组

【讨论】：

请仔细看我的问题