- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我希望它只是即插即用 :-) 我已经为此折腾了几个小时,但我的小实验都没有成功。 md数据表是新的,所以网上几乎没有什么神学知识。找到一种将 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.
除了我更改了模板绑定(bind)之外,我的 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() {}
数据表文档和 plunker 在组件中创建数据源和数据库,但如果我已经拥有 Firebase,那么其中大部分似乎都不是必需的。我正在学习所有这些,所以我远不是任何方面的专家,也许我遗漏了一些东西。
如果您之前没有接触过这个新设置,那么这里是文档。 md 表建立在 cdk 表之上,为 cdk 表提供样式。
最佳答案
我添加了在使用 MD 数据表的 MD 分页器时连接到 Firebase 的代码。 Paginator 使服务中的代码更加复杂。大多数代码都在它所属的服务中。享受吧!
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { FirebaseApp } from 'angularfire2';
import { Inject, Injectable } from '@angular/core';
import { MemberModel } from './member-admin.model';
import { SuccessService } from '../../../shared/success.service';
// Data Table imports.
import { MdPaginator } from '@angular/material';
import { DataSource } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/combineLatest';
import 'rxjs/add/operator/map';
@Injectable()
export class MembersAdminService {
private membersData$: FirebaseListObservable<MemberModel[]>;
constructor(
public af: AngularFireDatabase,
private successService: SuccessService,
// For Create and Update functions.
@Inject(FirebaseApp) fb) {
this.membersData$ = af.list('Members');
}
// ... CRUD stuff not relevant to the MD Table ...
// *** MD DATA TABLE SERVICES. ***
@Injectable()
export class MemberDatabase {
/* Stream that emits whenever the data has been modified. */
public dataChange: BehaviorSubject<MemberModel[]> = new BehaviorSubject<MemberModel[]>([]);
get data(): MemberModel[] {
return this.dataChange.value; }
// Connection to remote db.
private database = this.memberAdminService.af.list('Members', {
query: {
orderByChild: 'lastName'
}
});
public getMembers(): FirebaseListObservable<MemberModel[]> {
return this.database;
}
constructor(private memberAdminService: MembersAdminService) {
this.getMembers()
.subscribe(data => this.dataChange.next(data));
}
}
@Injectable()
export class MembersAdminSource extends DataSource<MemberModel> {
constructor(
private memberDatabase: MemberDatabase,
private paginator: MdPaginator) {
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<MemberModel[]> {
const displayDataChanges = [
this.memberDatabase.dataChange,
this.paginator.page,
];
return Observable
.merge(...displayDataChanges) // Convert object to array with spread syntax.
.map(() => {
const dataSlice = this.memberDatabase.data.slice(); // Data removed from viewed page.
// Get the page's slice per pageSize setting.
const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
const dataLength = this.paginator.length; // This is for the counter on the DOM.
return dataSlice.splice(startIndex, this.paginator.pageSize);
});
}
disconnect() {}
}
在 ngOnInit
和类属性中进行了一些重构。
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs/Subject';
// For MD Data Table.
import { MdPaginator } from '@angular/material';
import { MembersAdminService, MembersAdminSource, MemberDatabase } from './member-admin.service';
import { ConfirmService } from '../../../shared/confirm.service';
import { MemberModel } from './member-admin.model';
@Component({
selector: 'app-all-members',
templateUrl: './all-members.component.html'
})
export class AllMembersComponent implements OnInit {
membersData: MemberModel[];
private result: boolean;
allMembers: MemberModel[];
// For search
startAt = new Subject();
endAt = new Subject();
lastKeypress: 0;
// For MD data table.
// private memberDatabase = new MemberDatabase(); // Requires a param but? Moved to constructor.
private dataSource: MembersAdminSource | null;
private displayedColumns = [
'firstName',
'lastName',
'mainSkillTitle',
'mainSkills',
'delete',
'key'
];
@ViewChild(MdPaginator)
paginator: MdPaginator;
public dataLength: any; // For member counter on DOM.
constructor(
private membersAdminService: MembersAdminService,
private memberDatabase: MemberDatabase,
private router: Router,
private confirmService: ConfirmService
) {}
ngOnInit() {
this.memberDatabase.getMembers()
.subscribe(members => {
this.dataSource = new MembersAdminSource(this.memberDatabase, this.paginator);
this.dataLength = members;
});
}
请注意,我在行中有用于删除和编辑的按钮,它们工作正常。诀窍是您需要隐藏列中的数据库 key 。
<md-table #table [dataSource]="dataSource">
<!-- First Name Column -->
<ng-container cdkColumnDef="firstName">
<md-header-cell *cdkHeaderCellDef> First Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.firstName}} </md-cell>
</ng-container>
<!-- Las Name Column -->
<ng-container cdkColumnDef="lastName">
<md-header-cell *cdkHeaderCellDef> Last Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.lastName}} </md-cell>
</ng-container>
<!-- Title Column -->
<ng-container cdkColumnDef="mainSkillTitle">
<md-header-cell *cdkHeaderCellDef> Title </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.mainSkillTitle}} </md-cell>
</ng-container>
<!-- Main Skills Column -->
<ng-container cdkColumnDef="mainSkills">
<md-header-cell *cdkHeaderCellDef> Main Skills </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.mainSkills}} </md-cell>
</ng-container>
<!-- Delete Buttons Column -->
<ng-container cdkColumnDef="delete">
<md-header-cell *cdkHeaderCellDef> Delete / Edit </md-header-cell>
<md-cell *cdkCellDef="let row">
<button (click)="deleteMember(row.$key)">Delete</button>
<button (click)="goToDetailPage(row.$key)">Edit</button>
</md-cell>
</ng-container>
<!-- Database key Column -->
<ng-container cdkColumnDef="key">
<md-header-cell *cdkHeaderCellDef class="hiddenField"> Key </md-header-cell>
<md-cell *cdkCellDef="let row" class="hiddenField"> {{row.$key}} </md-cell>
</ng-container>
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
</md-table>
<md-paginator #paginator
[length]="dataLength?.length"
[pageIndex]="0"
[pageSize]="5"
[pageSizeOptions]="[5, 10, 25, 100]">
</md-paginator>
关于Angular Material 2 数据表连接到 AngularFire2 或 Firebase 服务?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45336706/
我是 angular 的新手,想动态地更改 angular Material 主题,我知道如何通过制作 scss 文件来制作不同的主题,定义 3 种颜色,包括 mat 属性和功能,但后来我在 angu
我猜,是不允许在 Material 网格(嵌套网格)中放置 Material 网格吗? 有人可以确认我的假设吗? (我正在使用 Angular Material 6。) l
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我一直在 material-ui react 库中看到对名为“LeftNav ”的组件的引用(例如: Material UI - Open LeftNav / Drawer on AppBar cli
我正在使用 mat-list而且我无法在移动设备上滚动它。 它是一个 mat-nav-list,里面有一些 mat-list-item,我的列表结构类似于: dashboard
我是网络开发的新手,正在尝试使用 material-ui。我看到一些演示代码使用 withStyle,还有一些使用 withTheme。它们之间有什么区别吗?非常感谢! 最佳答案 我认为接受的答案没有
我正在研究 Material 设计和 Material 设计中描述的一些指南。 我似乎遗漏了一个部分(不确定是否应该涵盖),即 Google 如何处理 Fieldsets。该文档确实涵盖了各个输入,但
我正在根据到目前为止所学的知识使用 Material 设计创建一个示例应用程序,但我注意到 Material 设计的开箱即用字体对于不同的组件是不同的。对于 Material 对话框中的 Materi
我确实有角度 6,尽管 ng generate @angular/material:material-nav --name home不工作 得到类似的错误 Collection "@angular/m
我正在使用图书馆 material-table对于我的应用程序中的数据表。我将数据 Prop 设置为使用来自 this.state.data 的数据,并且添加行将通过使用 setState 在我的表上
如何在 Angular Material Design 中设置工具栏下方的侧导航?这样 sidenav 就不会越过工具栏.. 最佳答案 这是一个布局问题。只需使用此页面结构:
我使用的是角 Material 2,但我认为这也适用于角 Material 1。 假设我想使用角度 Material 选项卡,但我想隐藏选项卡或向其添加一些特定样式。 所以我有以下 html/angu
我安装了 material-ui“^1.0.0-beta.36”。文档说有日期选择器。 但我在 node_modules\material-ui 和任何子文件夹中都找不到它。 更改日志表明计划在未来版
从一小时前开始,我在 Material 设计图标 cdn 上不断收到网络错误,因为错误名称未解析。 http://cdn.materialdesignicons.com/5.4.55/css/mate
如何在不失去波纹效果的情况下更改角 Material 开关按钮的颜色? 请在此处查看代码笔:http://codepen.io/shyambhiogade/pen/LpNGBP 我已将颜色更改为 #0
对于textfield并选择,我看到我们具有以下选项来添加variant =“ outlined”。 但是,我看不到material-ui / DatePicker。有人可以建议如何使用实质性UI将v
在 3.1.0 版本中使用“@material-ui/core” 全局覆盖步进器图标的颜色非常容易全局 createMuiTheme({ overrides: { MuiStepIco
我在我的应用程序脚本插件中使用 materializecss,当我尝试动态添加工具提示时,提示不会使用新标签更新。我尝试了几种变体,甚至仔细检查了小费是否正在改变,确实如此。问题是它似乎没有用更新的文
有谁知道当模式确定时如何在 Material 进度微调器中显示不完整的部分。现在我是这样的 . 但我想要这样 最佳答案 这可以做到,但它主要是一个黑客。这个想法是使用一个带有与微调器匹配的边框的 di
我今天发现了这个很棒的 UI 框架,并花了很多时间浏览文档,我必须说,我已经爱上了它。现在我想将它用于一个中等规模的项目,但我有两个顾虑: 我找不到任何网格系统,我该如何进行布局? 如何让它响应? 我
我是一名优秀的程序员,十分优秀!