我希望它只是即插即用:-)我一直在喋喋不休地打了几个小时没有我的小实验工作 . md数据表是新的,因此Web上几乎没有神圣的知识 . 找到将Firebase连接到桌面的好方法将是一个良好的开端 . 有任何想法吗?
目前我有这个设置 . 我的代码很好,没有带有标准Angular设置和代码的表,使用ngFor并从模板创建列表 . 因此代码使用AngularFire 2从Firebase传递数据 . 尝试新的md数据表是个问题 .
首先,模板不会渲染 . 我知道我已正确设置NgModule,所以我怀疑数据源没有连接并创建此错误 . 这是Chrome控制台中的错误 .
Template parse errors:
Can't bind to 'dataSource' since it isn't a known property of 'md-table'.
1. If 'md-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
我的members- search.component.html看起来与官方文档完全相同,只是我更改了模板绑定:
<md-table #table [dataSource]="dataSource">
<ng-container cdkColumnDef="memberName">
<md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{member.firstName}} {{ member?.lastName }} </md-cell>
</ng-container>
members-search.component.ts包含以下相关部分:
import { DataSource } from '@angular/cdk';
@Injectable()
export class MembersAdminService {
private members$: FirebaseListObservable<Member[]>;
private dataSource: DataSource<any>;
constructor(
private af: AngularFireDatabase,
@Inject(FirebaseApp) fb) {
this.members$ = af.list('Members');
}
我将这些数据表函数放入members-search.service.ts中的工作代码中,并在connect()中使用了相同的代码,我在其他地方使用过该服务 .
// md table dataSource functions.
public connect(): FirebaseListObservable<any> {
return this.af.list('Members', {
query: {
orderByChild: 'lastName'
}
});
// return this._exampleDatabase.dataChange;
}
public disconnect() {}
数据表docs和plunker在组件中创建了一个数据源和数据库,但是如果我已经拥有Firebase,那么大多数情况似乎都没有必要 . 我正在学习所有这些,所以我在任何事情上都不是专家,也许我错过了一些东西 .
如果您之前没有进入这个新设置,那么这里是文档 . md表构建在cdk表的顶部,为cdk表提供样式 .
3 回答
我在MD数据表中使用MD Paginator时添加了连接到Firebase的代码 . Paginator使服务中的代码更加复杂 . 大多数代码都在它所属的服务中 . 请享用!
member-admin.service.ts
all-members.component.ts
在
ngOnInit
和类属性中进行了一些重构 .all-members.component.html
注意我在行中有按钮用于删除和编辑,它们工作正常 . 诀窍是您需要隐藏列中的数据库密钥 .
以下解决方案有效 . 花了一段时间才弄清楚如何解决这个问题,我从Will Howell那里得到了Reddit Angular小组的熟练帮助 . 我的服务更多地涉及CRUD的东西,但那些没有't baked yet. I'm设置为主要细节与按钮显示删除和编辑 . 最后一列将Firebase
$key
带到了DOM上,我将这个混乱的错误代码发布到另一个具有更具体 Headers 的Stack Overflow帖子中 .member-admin.service.ts
该服务包括三个类,如果设置像我已经完成的AM2数据表文档 . 我不确定我喜欢这个但是现在会关注文档 .
all-members.component.ts
all-members.component.html
以为我会为寻找这个解决方案的人添加我的方法 .
我忘了在firebase规则中将排序字段添加到
.indexOn
.我没有设法让分页工作,因为它太难以解决startKey!
firebase-datasource.ts
首先定义一个模板数据源,我可以为需要这个的所有集合重用它 .
然后是一个示例用法:
roles-datasource.ts 在相关模块的'providers'中声明此内容 . (代码未显示)
现在让我们看一下UI组件:
all-roles.component.html
忽略工具栏的无关代码等 . 需要注意的重要部分是
mat-table
和matSort
指令 .all-roles.component.ts
最后在UI Layer实现 . 作为一种品味,它捕获
MatSort
更新并将它们发送到数据源,因为我还在加载数据时添加了一个简单的Ajax Loader .