Angular 在表之间添加动态行

我在试图在表之间添加一行时遇到了这个问题

如图中所示，有3行，历史按钮有2行。我只需要显示历史记录按钮单击的详细信息，但它应该就在按钮行的后面。现在，当我尝试切换或显示/隐藏时，它将仅位于最后一行之后

---

我正在尝试使用angular4

您可以尝试此解决方案

我已经在上创建了一个演示。我希望这将对你/其他人有所帮助/指导

html代码

---

谢谢奎师那，但是你只创建了html视图，按钮是不可点击的。我只需要点击历史按钮，在历史按钮的行后添加一行。我不明白你的意思。详细验证您可以尝试{{act.text}

 <table width="100%">
    <tbody>
        <tr>
            <th>Name</th>
            <th>Gender</th>
            <th>Birth Date</th>
            <th>City</th>
            <th>State</th>
            <th>Country</th>
            <th>Action</th>
        </tr>
        <tr *ngFor="let customtable of customTable" style="vertical-align: top;">
            <td>{{customtable.name}}</td>
            <td>{{customtable.gender}}</td>
            <td>{{customtable.birth | date:'dd/MM/yyyy'}}</td>
            <td>{{customtable.city}}</td>
            <td>{{customtable.state}}</td>
            <td>{{customtable.country}}</td>
            <td>
                <tr *ngFor="let act of customtable.actions">
                    <button >{{act.text}}</button>
                </tr>

            </td>
        </tr>
    </tbody>
</table>

customTable = [{
    name: 'User 1',
    gender: 'Male',
    birth: new Date(),
    city: 'Indore',
    state: 'MP',
    country: 'India',
    actions: [{
      id: 1,
      text: 'undo last step'
    }, {
      id: 2,
      text: 'history'
    }, {
      id: 3,
      text: 'extra'
    }]
  }, {
    name: 'User 2',
    gender: 'Female',
    birth: new Date(),
    city: 'Ahmedabad',
    state: 'Gujarat',
    country: 'India',
    actions: [{
      id: 1,
      text: 'Review patient'
    }, {
      id: 3,
      text: 'extra'
    }]
  }, {
    name: 'User 1',
    gender: 'Male',
    birth: new Date(),
    city: 'Indore',
    state: 'MP',
    country: 'India',
    actions: [{
      id: 1,
      text: 'undo last step'
    }, {
      id: 2,
      text: 'history'
    }]
  }]