在表之间添加动态行

Question

我在尝试在表之间添加一行时遇到问题。

在图像中可见有3行，历史按钮有2行。我需要显示历史按钮单击的详细信息，但它应该在按钮的行之后。现在当我试图切换或显示/隐藏时，它只会在最后一行之后。

我正在尝试在angular4

中执行此操作

Answer 1

您可以尝试此解决方案

我在stackblitz上创建了一个演示。我希望这会有助于/指导你/他人。

  

html代码

 <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>

  

ts文件代码

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'
    }]
  }]