- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我是 Angular 世界的新手,我正在尝试将 Angular Material 2 中的新 md-table 组件与 Angular 4 一起使用。
我已经通过 API 提供了一项服务,该服务可检索简单的内容数组。现在我正在尝试将此服务用作 md 表的数据源,但我找不到从该服务获取数据的方法(它总是返回一个空数组)。
请注意,在使用 md-table 之前,我已经在使用该服务并且它工作正常。
这是组件的代码:
import { Component, OnInit, ViewChild } from '@angular/core';
import {DataSource} from '@angular/cdk';
import {MdPaginator} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import { GroupService } from '../shared/group.service';
import { Group } from '../shared/group';
@Component({
selector: 'app-group-list',
templateUrl: './group-list.component.html',
styleUrls: ['./group-list.component.css'],
providers: [GroupService]
})
export class GroupListComponent implements OnInit{
public DisplayedColumns = ['name', 'email', 'directMembersCount'];
public groupDatabase = new GroupDatabase();
public dataSource : CustomDataSource | any;
@ViewChild(MdPaginator) paginator : MdPaginator;
constructor() {}
ngOnInit() {
this.dataSource = new CustomDataSource(this.groupDatabase, this.paginator);
console.log(this.dataSource);
}
}
export class GroupDatabase implements OnInit {
public dataChange: BehaviorSubject<Group[]> = new BehaviorSubject<Group[]>([]);
get data(): Group[] { return this.dataChange.value }
private _groupService : GroupService
private getAllGroups(){
return this._groupService
.getAllGroups();
}
constructor (){}
ngOnInit() {
this.getAllGroups();
console.log(this.getAllGroups());
}
}
export class CustomDataSource extends DataSource<any> {
constructor(private _groupDatabase = new GroupDatabase(), private _paginator: MdPaginator){
super();
}
connect(): Observable<Group[]> {
const displayDataChanges = [
this._groupDatabase.dataChange,
this._paginator.page
];
return Observable.merge(...displayDataChanges).map(() => {
const data = this._groupDatabase.data.slice();
console.log(data);
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
return data.splice(startIndex, this._paginator.pageSize);
})
}
disconnect() {}
}
这是 HTML 的代码:
<md-table #table [dataSource]="dataSource">
<ng-container *cdkColumnDef="name">
<md-header-cell *cdkCellDef>Nom</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
</ng-container>
<ng-container *cdkColumnDef="email">
<md-header-cell *cdkCellDef>Email</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.email}} </md-cell>
</ng-container>
<ng-container *cdkColumnDef="directMembersCount">
<md-header-cell *cdkCellDef>Nombre de membres</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.directMembersCount}} </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]="groupDatabase.data.length"
[pageIndex]="0"
[pageSize]="25"
[pageSizeOptions]="[5, 10, 25, 100]">
</md-paginator>
相关服务:
private groupApiUrl: string;
private groupsApiUrl: string;
private headers: Headers;
constructor(public http:Http, private config: Config) {
this.groupApiUrl = config.serverWithApi + "group";
this.groupsApiUrl = config.serverWithApi + "groups";
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.headers.append('Accept', 'application/json');
}
public getAllGroups = (): Observable<Group[]> => {
return this.http.get(this.groupsApiUrl)
.map((response: Response) => <Group[]>response.json())
.catch(this.handleError)
}
我不确定我应该如何使用数据源调用服务,这就是为什么我像以前那样做;使用 ngOnInit 方法。
谢谢你的帮助。
最佳答案
这是通过 HTTP 检索数据的示例:https://plnkr.co/edit/mjQbufh7cUynD6qhF5Ap?p=preview
您遗漏了一段,其中 GroupDatabase
没有将任何数据值放在 dataChange
流上。它是一个以空数组开头的 BehaviorSubject
,但您没有在其上放置任何更多数据。这就是表格只接收空数组的原因。
首先,知道 ngOnInit
不会被 Angular 调用,因为 GroupDatabase
不是指令,也不是变更检测周期的一部分。
相反,将 this.getAllGroups()
移动到 GroupDatabase
的构造函数中。然后订阅它的结果:
export class GroupDatabase {
public dataChange: BehaviorSubject<Group[]> = new BehaviorSubject<Group[]>([]);
get data(): Group[] { return this.dataChange.value }
constructor(groupService: GroupService) {
groupService.getAllGroups().subscribe(data => this.dataChange.next(data));
}
}
或者,完全摆脱 GroupDatabase,让您的 CustomDataSource
直接调用您的 GroupService。
export class CustomDataSource extends DataSource<Group> {
constructor(
private _groupService: GroupService,
private _paginator: MdPaginator) { }
connect(): Observable<Group[]> {
const displayDataChanges = [
this._groupService.getAllGroups(),
this._paginator.page
];
return Observable.merge(...displayDataChanges).map((data, page) => {
const clonedData = data.slice();
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
return data.splice(startIndex, this._paginator.pageSize);
})
}
disconnect() {}
}
关于angular - 如何在 Angular 4 中将 md-table 与服务一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45014257/
这个问题在这里已经有了答案: What is the best way to parse html in C#? [closed] (15 个答案) 关闭 3 年前。 string input =
为什么 wrapper #4 没有继承其父表容器的高度?表格嵌套在一个显示 block 包装器中,每个嵌套的div是显示表格,每个表格继承到最里面的一个。是什么原因造成的,我该如何解决? jsfidd
我正在使用带有 Bootstrap 的自定义 css 作为外边框。但顶部边框不可见,除非我将其大小设置为 2 px。 我该如何解决这个问题? HTML #name 1.one 2.two 3.thr
我正在逻辑层面上设计一个数据库,以便稍后将其传递给程序员来交付。我只是粗略地了解它们的工作原理,所以我很难简洁地表达我的问题。这是我的问题: 我有一个名为 MEANINGS 的表。 我有一个名为 WO
在 Laravel 上,我们可以使用 DB::table('table')->get(); 或使用 model::('table')->all() 进行访问;我的问题是它们之间有什么区别? 谢谢。 最
我试图从以下内容中抓取 URL从 WorldOMeter 获取 CoVid 数据,在此页面上存在一个表,id 为:main_table_countries_today其中包含我希望收集的 15x225
这是我的图表数据库:/image/CGAwh.png 我用 SEQUELIZE 制作了我的数据库模型: 型号:级别 module.exports = (sequelize, DataTypes) =>
我真的不明白为什么我的代码不能按预期工作。当我将鼠标悬停在表格的每一行上时,我想显示一个图像(来 self 之前加载的 JSON)。每个图像根据行的不同而不同,我想将它们显示在表格之外的另一个元素中。
假设我的数据库中有一张地铁 map ,其中每条线路的每个站点都是一行。如果我想知道我的线路在哪里互连: mysql> SELECT LineA.stop_id FROM LineA, LineB WH
我最近经常使用这些属性,尤其是 display: table-cell。它在现代浏览器中得到了很好的支持,并且它对某些网格有很多好处,并且可以非常轻松地对齐内容,而无需棘手的标记。但在过去的几天里,我
在 CSS 中,我可以这样做: http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20
问题作为标题,我正在学习sparkSQL,但我无法很好地理解它们之间的区别。谢谢。 最佳答案 spark.table之间没有区别& spark.read.table功能。 内部 spark.read.
我正在尝试根据 this answer 删除表上的非空约束.但是,它似乎没有在 sqlite_sequence 中创建条目。这样做之后,即使我可以在使用测试表时让它正常工作。 有趣的是,如果我备份我的
var otable = new sap.m.Table();//here table is created //here multiple header I'm trying to create t
下面两种方法有什么区别: 内存 性能 答: select table.id from table B: select a.id from table a 谢谢(抱歉,如果我的问题重复)。 最佳答案 完
我尝试在表格后添加点,方法是使用 table::after 选择器创建一个点元素并使用 margin: 5px auto 5px auto; 将其居中。它有效,但似乎在第一个表格列之后添加了点,而不是
我正在设计一个可以标记任何内容的数据库,我可能希望能够选择带有特定标记的所有内容。 我正在为以下两个选项而苦苦挣扎,希望得到一些建议。如果有更好的方法请告诉我。 选项A 多个“多对多”连接表。 tag
"center" div 中的下表元素导致 "left" div 中的内容从顶部偏移几个像素(在我的浏览器中为 8 ).在表格之前添加一些文本可消除此偏移量。 为什么?如何在不要求在我的表格前添加“虚
我是一名优秀的程序员,十分优秀!