Question

根据所单击的按钮，我加载了另一个Observable。

在父组件中，我有这个：

<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，但我建议您在此函数内使用setter和susbcribe，请参见例如在stackblitz

中

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

Observable <any>作为子组件中的输入参数

1 个答案: