Угловой ng-контент с вводом внутри * ngFor

Я пытаюсь создать компонент в Angular, который может отображать разные компоненты внутри; это будет похоже на динамическую таблицу, поэтому, когда пользователь нажимает на строку, она расширяется, чтобы отобразить что-то; что от чего-то зависит и в идеале будет что угодно.

Итак, я пытаюсь использовать ng-контент, но он работает не так, как я ожидал. Я попытался уменьшить его функциональность до минимума, который мне нужен в плункере.

По сути, у меня есть родительский компонент (мой-родитель), который представляет собой таблицу и отображает список строк, но для каждой строки я также хочу отображать еще одну строку ниже с содержимым компонента, спроецированного его родителем.

компонент моего приложения

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

@Component({
  selector: 'my-app',
  template: `
    <div>
      <my-parent [data]="rows">
        <my-child *ngFor="let r of rows" [name]="r.name"></my-child>
      </my-parent>
    </div>
  `
})
export class AppComponent { 

  rows = [
    { name: 'data1' },
    { name: 'data2' },
    { name: 'data3' },
    { name: 'data4' }
  ];
}

Я проецирую 4 компонента здесь внутри my-parent, по одному для каждой строки.

Затем в моем-родителе

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'my-parent',
  template: `
    <table>
      <thead>
        <tr>
          <th>my data header</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let d of data">
          <tr>
            <td>{{ d.name }}</td>
          </tr>
          <tr>
            <td>
              <ng-content></ng-content>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  `
})
export class ParentComponent {
  @Input() data: any;
}

Здесь я показываю все строки, и я хочу, чтобы каждая из них также имела соответствующую строку ниже.

И, наконец, компонент my-child

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

@Component({
  selector: 'my-child',
  template: `
    <h2>name: {{ name }}</h2>
  `
})
export class ChildComponent {
  @Input() name: string;
}

Это действительно что-то делает, отображает все строки в таблице, а затем все проецируемые компоненты.

my data header
data1
data2
data3
data4
name: data1

name: data2

name: data3

name: data4

но я хочу, чтобы отображалось так

my data header
data1
name: data1

data2
name: data2

data3
name: data3

data4
name: data4

Я понимаю, что то, как я это сделал, не имеет особого смысла, потому что я не говорю Angular, где отображать каждый проецируемый компонент, но я пробовал с ng-content select, и это не работает, потому что мой выбор должен быть динамическим, что-то вроде ng-content select="#{{d.name}}" и с использованием <my-child id="{{r.name}}"></my-child>

Я читал об использовании шаблонов и прочем, но, честно говоря, не особо в этом разбираюсь. Кто-нибудь хотел бы взглянуть на plunker и предложить что-нибудь?

Спасибо