2017-10-04 34 views
1

我有一个Angular应用程序,基本上有一个组件提交了多个选项卡。第一个选项卡提交请求,然后填充2个表格,每个表格都位于单独的选项卡上。我正在使用MdSort,MdPaginator和每个表上的过滤器等物料功能。基于角的文档,它已经选择了这样的mdSort元素:在同一组件中使用mdSort的角度多个md表

@ViewChild(MdSort) sort: MdSort; 

和HTML是

<md-table id="datatable" #datatable [dataSource]="resultDataSource" mdSort> 

这工作正常,如果只有1中的成分表,但因为我有2个表格,我如何正确选择每个要提供给数据源的排序元素?如果答案是为每个表使用单独的组件,那么如何将结果数据传递到其他组件中的数据源?

+0

组件的思想是为每个表使用相同的组件。然后,您将传递数据(resultDataSource)作为组件上的输入。 –

回答

-1

我最终解决了这个问题,将每个选项卡(以及每个表)的内容移动到具有自己数据源的组件中。该请求组件的HTML用于儿童组件选择如下:

<md-tab label="Results"> 
    <md-card class="datacard resultscard"> 
    <md-card-content> 
     <app-result></app-result> 
    </md-card-content> 
    </md-card> 
</md-tab> 

<md-tab label="Alerts"> 
    <md-card class="datacard resultscard"> 
    <md-card-content> 
     <app-alert></app-alert> 
    </md-card-content> 
    </md-card> 
</md-tab> 

然后在请求组件我引用使用ViewChild

@ViewChild(RequestComponent) resultsChild: ResultComponent; 
@ViewChild(AlertComponent) alertsChild: AlertComponent; 

然后叫我已包含在每个组件的方法子组件将请求返回的数据发送给这些组件,以便将它们添加到其各自表的数据源中。没有真正回答原来的问题,但它是我需要完成的解决方法。

相关问题