角材料MatTableDataSource服务器端分页不起作用

时间:2018-08-10 07:30:11

标签: datatable pagination angular-material observable

我刚开始使用棱角分明,我正在尝试将材质表应用于分页和排序。因此,最初我尝试分页。我坚持这个错误。有人帮我分页吗?

错误是:

  

类型'()=>上不存在属性'subscribe'   可观察的”。

servertable.component.ts

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
#  test_coord.py
#
#  Copyright 2016 John Coppens <john@jcoppens.com>
#
#  This program is free software```; you can redistribute it and/or modify
#  it under the terms of the GNU General Public License as published by
#  the Free Software Foundation; either version 2 of the License, or
#  (at your option) any later version.
#
#  This program is distributed in the hope that it will be useful,
#  but WITHOUT ANY WARRANTY; without even the implied warranty of
#  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#  GNU General Public License for more details.
#
#  You should have received a copy of the GNU General Public License
#  along with this program; if not, write to the Free Software
#  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
#  MA 02110-1301, USA.
#
#


from gi.repository import Gtk


class MainWindow(Gtk.Window):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.connect("destroy", lambda x: Gtk.main_quit())

        self.trview = Gtk.TreeView()
        tstore = Gtk.ListStore(str, str, str)
        renderer = Gtk.CellRendererText()
        for i in range(3):
            col = Gtk.TreeViewColumn("Col %d" % i, renderer, text=i)
            # col.colnr = i
            self.trview.append_column(col)

        self.trview.set_model(tstore)
        self.trview.get_selection()\
            .connect("changed", self.on_selection_changed)

        for i in range(0, 15, 3):
            tstore.append((str(i), str(i+1), str(i+2)))

        self.add(self.trview)
        self.show_all()

    def on_selection_changed(self, selection):
        print("trview.get_cursor() returns: {}"
              .format(self.trview.get_cursor()))

    def run(self):
        Gtk.main()


def main(args):
    mainwdw = MainWindow()
    mainwdw.run()

    return 0


if __name__ == '__main__':
    import sys
    sys.exit(main(sys.argv))

user.service.ts

import { Component, OnInit, AfterContentInit, ViewChild } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { UserService } from './user.service';
import { IUser } from './model/IUser';

@Component({
  selector: 'app-servertable',
  templateUrl: './servertable.component.html',
  styleUrls: ['./servertable.component.scss']
})
export class ServertableComponent implements OnInit, AfterContentInit, AfterViewInit {

  dataSource: any;
  users: IUser[];
  displayedColumns = ['name', 'email', 'phone', 'company'];      

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private service: UserService) { }

  ngOnInit() {
    this.service.getUser.subscribe(results => this.users = results);
    console.dir(this.dataSource);
  }

  ngAfterContentInit() {
    this.dataSource = new MatTableDataSource(this.users);
    this.dataSource.paginator = this.paginator;
  }
}

servertable.component.html

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs/observable';
import { IUser } from './model/IUser';

@Injectable()
export class UserService {

  private serviceUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getUser(): Observable<IUser[]> {
    return this.http.get<IUser[]>(this.serviceUrl);
  }
}

1 个答案:

答案 0 :(得分:1)

您没有调用服务方法:this.service.getUser.subscribe(results => this.users = results);。您忘了在getUser上加上括号。

将其更改为:this.service.getUser().subscribe(results => this.users = results);

还有另一个问题:this.usersngAfterContentInit中将不可用,因为getUser()调用是异步的。将表的分配移到您的subscribe()调用中。整个ngOnInit()如下所示:

ngOnInit() {
    this.service.getUser().subscribe(results => {
        this.users = results;
        this.dataSource = new MatTableDataSource(this.users);
        this.dataSource.paginator = this.paginator;
    });
}