Добавить динамическую строку между таблицами

Question

Я столкнулся с проблемой при попытке добавить одну строку между таблицами.

Как видно на изображении, есть 3 строки и кнопка историина 2 ряда.Все, что мне нужно, чтобы показать детали по истории нажатия кнопки, но это должно быть сразу после строки кнопки.Прямо сейчас, когда я пытаюсь сделать переключение или показать / скрыть, это происходит после последней строки.

Я пытаюсь сделать это в angular4

Answer 1

Вы можете попробовать это решение

Я создал демо на stackblitz .Я надеюсь, что это поможет / поможет вам / другим.

html code

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