Наблюдаемый <any>как входной параметр в дочернем компоненте

Question

В зависимости от нажатой кнопки я загружаю различную наблюдаемую.

В родительском компоненте у меня есть это:

<button (click)="onClickMe1()">Click me 1!</button>
<button (click)="onClickMe2()">Click me 2!</button>

но в таблице ничего не загружено.

myDatasource : Observable<any>;
export class ClickMeComponent {
  onClickMe1() {
    this.myDatasource = this.invoiceService.getMyList1(); //return an Observable<any>
  }

  onClickMe2() {
    this.myDatasource = this.invoiceService.getMyList2(); //return an Observable<any>
  }
}

The child component :
<app-grid-invoice-basic-detail [datasource]=myDatasource></app-grid-invoice-basic-detail>


@Input() datasource: Observable<any[]>;
export class ChildComponent {

    ngOnChanges(changes: SimpleChanges) {
        this.datasource.subscribe((data) => {
            this.dataTable = {
            headerRow: [ 'A', 'B', 'C' ],
            footerRow: [ 'A', 'B', 'C' ],
            dataRows: data["invoices"]
        };
        this.InitTable();
        },
        error => {
        });     
    }

    InitTable(){
        $('#datatableBalanceAmount').DataTable({
          "lengthMenu": [
            [15, 30, 50, -1],
            [15, 30, 50, "All"]
          ],
          responsive: true,
          language: {
            search: '_INPUT_'
          }

        });     
    }
}

Update1, частичный код родительского компонента

<div class="tab-pane" id="myTab1">
   <app-clickme [datasource]=tabLateInvoiceObservable></app-clickme>
</div>   

Update2, содержимое JSON:

{
    "invoices": [
        {
            "customerName": "XXXXXX",
            "customerReference": "1900008"
        }
    ]
}

не поставил здесь все поля. Но результат верный, потому что когда я создаю сетку в родительском компоненте, значения видны и сетка тоже.

Answer 1

Ваш компонент не реализует ngOnChanges, но я предлагаю вам использовать установщик и подписывать внутри этой функции, см., Например, в стекблиц

@Input('data') 
  set $data(value)
  {
    if (value)
    value.subscribe(res=>{
      this.data=res
    })
  }
  data;