php - 我使用原理图生成 ng 材料数据表。我尝试用来自 api 的数据替换他们的虚拟数据,但无法完成
问题描述
这是界面Tickets[]
export interface Tickets {
name: string;
id: number;
}
这是我创建的服务,它应该返回从 API 获取的数据。但在这里我对数据进行了硬编码(请有人帮助我使用正确的函数,从函数中返回api
数据getData()
)
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Tickets } from './ticket.model'
@Injectable({
providedIn: 'root'
})
export class OpenTicketsService {
private _url:string = 'assets/data.json';
constructor(private http: HttpClient) { }
dataRequest():Observable<Tickets[]>{
return this.http.get<Tickets[]>(this._url);
}
getData(){
//to be replace with the code that will subscribe to `dataRequest()` and return the data
return [
{id: 1, name: 'Hydrogen'},
{id: 2, name: 'Helium'},
{id: 3, name: 'Lithium'},
{id: 4, name: 'Beryllium'},
{id: 5, name: 'Boron'},
{id: 6, name: 'Carbon'},
{id: 7, name: 'Nitrogen'},
{id: 8, name: 'Oxygen'},
{id: 9, name: 'Fluorine'},
{id: 10, name: 'Neon'},
];
}
这是与角度材料数据表一起生成的 datasource.ts 文件
import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';
import { OpenTicketsService } from './open-tickets.service';
import { Tickets } from './ticket.model';
export class TicketsTableDataSource extends DataSource<Tickets> {
//this is the function that will return the data from OpenTicketsService and assign it to "data"
data: Tickets[] = this.ticketService.getData();
paginator: MatPaginator;
sort: MatSort;
constructor(private ticketService:OpenTicketsService) {
super();
}
connect(): Observable<Tickets[]> {
const dataMutations = [
observableOf(this.data),
this.paginator.page,
this.sort.sortChange
];
return merge(...dataMutations).pipe(map(() => {
return this.getPagedData(this.getSortedData([...this.data]));
}));
}
disconnect() {}
private getPagedData(data: Tickets[]) {
const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
return data.splice(startIndex, this.paginator.pageSize);
}
private getSortedData(data: Tickets[]) {
if (!this.sort.active || this.sort.direction === '') {
return data;
}
return data.sort((a, b) => {
const isAsc = this.sort.direction === 'asc';
switch (this.sort.active) {
case 'name': return compare(a.name, b.name, isAsc);
case 'id': return compare(+a.id, +b.id, isAsc);
default: return 0;
}
});
}
}
function compare(a: string | number, b: string | number, isAsc: boolean) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
将在 component.html 上显示数据的 component.ts 文件
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTable } from '@angular/material/table';
import { TicketsTableDataSource } from './tickets-table-datasource';
import { Tickets } from './ticket.model';
import { OpenTicketsService } from './open-tickets.service';
@Component({
selector: 'app-tickets-table',
templateUrl: './tickets-table.component.html',
styleUrls: ['./tickets-table.component.scss']
})
export class TicketsTableComponent implements AfterViewInit, OnInit {
constructor(private ticketService:OpenTicketsService) { }
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable<Tickets>;
dataSource: TicketsTableDataSource;
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['id', 'name'];
ngOnInit() {
this.dataSource = new TicketsTableDataSource(this.ticketService);
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource;
}
}
解决方案
数据源不能是“服务”!!
此外,您不需要使用 ngAfterView 和 View Child 来为您的表提供所有属性,请参阅文档中的示例
我想你想写一些像
ngAfterViewInit() {
this.tickerService.dataRequest().subscribe(res=>{
this.dataSource = new TicketsTableDataSource(res);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource;
})
}
看到都在订阅功能下
注意:如果你使用{static:true}
你可以在 ngOnInit 中指定分页器
推荐阅读
- oracle - 如何通过从另一个表结果中选择列来在选择查询中提供动态列
- uwp - 使用 UWP 连接到 Arduino
- python - django - 数据库 - 从 sqlite 到 postgres,没有完全迁移,缺乏语言支持?
- ios - 如何在 WKWebView 中加载带有参数的 POST URLRequest?
- python - NameError:名称“pip_install”未定义
- elasticsearch - 如何在 Grafana 中使用独立于时间范围过滤器的变量(用于过滤数据的下拉菜单)创建弹性搜索仪表板
- django - 鹡鸰大文件 403 服务时
- jquery - Asp.net core MVC jquery Autcomplete返回空白数据行
- android-studio - 单击按钮时如何折叠和展开回收站视图布局?
- sql - 由于版本控制崩溃而丢失记录