angular-cdk 的数据源可以与 md-select 一起使用吗？答案

【问题标题】：Can angular-cdk's datasource be used with an md-select?angular-cdk 的数据源可以与 md-select 一起使用吗？
【发布时间】：2018-01-11 17:28:33
【问题描述】：

我正在使用 Angular 4 和 Angular Material 2 (2.0.0-beta8) 的当前测试版。

Material 的表格组件建立在 CDK 数据表格之上。因此，很容易连接一个调用服务/api 获取数据的后端，并且它实现了使用 RxJS Observables 到事物的所有连接。（见demo here。）

我想弄清楚是否可以使用@angular/cdk 之外的相同DataSource 接口并使用它来填充一堆md-select 元素。

例如这样的：

<md-select class="col-lg-4" placeholder="Product" [dataSource]="configData">
  <md-option *ngFor="let product of products" [value]="product.id">{{product.display_name}}</md-option>
</md-select>

这不起作用，因为md-select 没有dataSource 属性。我可以在md-select 上使用类似的接口或属性吗？我要做的不是重新实现 md-table/dataSource 实现使用的所有 Observables 和其他反应性功能。

【问题讨论】：

标签： angular angular-material2 angular-cdk

【解决方案1】：

npm install @matheo/datasource

我发布了一个库，旨在成为未来的官方 Material DataSource，支持任何类型的输入流（排序、分页、过滤器），以及一些带有调试功能的配置，以便在您编码时查看它是如何工作的。

import { MatDataSourceModule } from '@matheo/datasource';

您的选择可以是表单的一部分，触发更改并使用根据您的选择器的值构建的请求刷新DataSource。

您可以在此处找到 StackBlitz 演示和更多信息：
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6

如果有必要，我很乐意听取您的意见并支持您的用例。
编码愉快！

【讨论】：