我正在尝试使用Angular材质表来处理对我的数据库的api调用我得到了正确的数据我只想用新材料表显示,并且出于某种原因,这不能按预期工作。
这是我的主要成分
import { Component } from '@angular/core';
import {AosService} from './app.aos.service.component'
import {QuoteModel} from './QuoteModel'
import {DataSource} from '@angular/cdk';
@Component({
selector: 'app-aos',
providers: [AosService],
templateUrl: './app.aos.quoteQuery.component.html',
styleUrls: ['./app.aos.quoteQuery.component.scss']
})
export class AOSAppComponent {
displayedColumns = ['OrdNbr', 'sotypeid', 'user6', 'LUpd_DateTime', 'User3', 'crtd_user', 'S4Future01', 'SlsperID', 'TotMerch', 'CustOrdNbr'];
DataSource;
public datas;
public hidData = true;
constructor(private _aosService: AosService) {
}
getAosQuote(quote: string) {
this._aosService.getQuoteQueryData(quote.toUpperCase()).subscribe(res => {
this.hidData = false;
this.DataSource = res.recordset;
console.log(this.DataSource);
})
}
}
这是我的服务模块进行调用
import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Rx';
import {QuoteModel} from './QuoteModel'
@Injectable()
export class AosService {
private headers = new Headers({ 'content-type': 'application/json', 'Accept': 'application/json' });
private options = new RequestOptions({ headers: this.headers });
private aosUrl = 'http://localhost:3001/api/query/'
constructor(private http: Http) { }
getQuoteQueryData(quote: string) {
return this.http.get(this.aosUrl + quote, this.options)
.map((res: any) => res.json())
.catch((error: Response) => [{ status: error }]);
}
}
我在console.log语句中获取数据
这是我的HTML
<app-aos-header></app-aos-header>
<div class="container">
<div>
<md-input-container class="aos-full-width">
<input type="search" (keyup.enter)="getAosQuote(quote.value)" #quote mdInput placeholder="Quote Number" required>
</md-input-container>
</div>
<div>
<button md-raised-button color="primary" (click)="getAosQuote(quote.value)" type="button">Search</button>
</div>
</div>
<div [hidden]="hidData" class="example-container mat-elevation-z8">
<md-table #table [dataSource]="dataSource">
<ng-container cdkColumnDef="CustOrdNbr">
<md-header-cell *cdkHeaderCellDef> Customer Order Number </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.CustOrdNbr}} </md-cell>
</ng-container>
<ng-container cdkColumnDef="LUpd_DateTime">
<md-header-cell *cdkHeaderCellDef> Last Update </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.LUpd_DateTime}}% </md-cell>
</ng-container>
<ng-container cdkColumnDef="OrdNbr">
<md-header-cell *cdkHeaderCellDef> Order Number </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.OrdNbr}} </md-cell>
</ng-container>
<ng-container cdkColumnDef="S4Future01">
<md-header-cell *cdkHeaderCellDef>Future</md-header-cell>
<md-cell *cdkCellDef="let row">{{row.S4Future01}} </md-cell>
</ng-container>
<ng-container cdkColumnDef="SlsperID">
<md-header-cell *cdkHeaderCellDef>Sales person</md-header-cell>
<md-cell *cdkCellDef="let row">{{row.SlsperID}} </md-cell>
</ng-container>
<ng-container cdkColumnDef="TotMerch">
<md-header-cell *cdkHeaderCellDef>Total Merchandise</md-header-cell>
<md-cell *cdkCellDef="let row">{{row.TotMerch}} </md-cell>
</ng-container>
<ng-container cdkColumnDef="User3">
<md-header-cell *cdkHeaderCellDef>User 3</md-header-cell>
<md-cell *cdkCellDef="let row">{{row.User3}} </md-cell>
</ng-container>
<ng-container cdkColumnDef="crtd_user">
<md-header-cell *cdkHeaderCellDef>crtd_user</md-header-cell>
<md-cell *cdkCellDef="let row">{{row.crtd_user}} </md-cell>
</ng-container>
<ng-container cdkColumnDef="sotypeid">
<md-header-cell *cdkHeaderCellDef>SO Type</md-header-cell>
<md-cell *cdkCellDef="let row">{{row.sotypeid}} </md-cell>
</ng-container>
<ng-container cdkColumnDef="user6">
<md-header-cell *cdkHeaderCellDef>user 6</md-header-cell>
<md-cell *cdkCellDef="let row">{{row.user6}} </md-cell>
</ng-container>
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
</md-table>
</div>
答案 0 :(得分:1)
您在评论中提供的代码正确。要将quote
传递给服务,您需要在constructor
类的AOSDataSource
添加一个附加参数。然后,当您从quote
函数创建AOSDataSource
的实例时,您可以从组件中传递getAosQuote
值。
TS:
export class AOSAppComponent {
displayedColumns = ['OrdNbr', 'sotypeid', 'user6', 'LUpd_DateTime', 'User3', 'crtd_user', 'S4Future01', 'SlsperID', 'TotMerch', 'CustOrdNbr'];
dataSource: AOSDataSource | null;
tableVisible = false;
constructor(private appState: AppState){ }
getAosQuote(quote: string, keepFocus: boolean) {
if(!this.tableVisible){
setTimeout(() => {
document.getElementById('quote').blur();
if(keepFocus){
document.getElementById('quote').focus();
}
this.tableVisible = true},
2000)
}
this.dataSource = new AOSDataSource(this.appState, quote);
}
}
export class AOSDataSource extends DataSource<any> {
constructor(private appState: AppState, private quote: String) {
super();
}
subject: BehaviorSubject<[]> = new BehaviorSubject<[]>([]);
connect(): Observable<[]> {
console.log('connect');
if (!this.subject.isStopped)
this.appState.getQuoteQueryData(this.quote.toUpperCase())
.subscribe({
next: (value) => {
console.log(value);
this.subject.next(value);
}
});
return Observable.merge(this.subject);
}
disconnect() {
this.subject.complete();
this.subject.observers = [];
}
}
注意:我在boolean
函数中添加了一个额外的setTimeout
标记和getAosQuote
,因为我遇到了问题,在初始化之后,表需要几秒钟和一个事件到触发connect()
并呈现数据。所以,我补充说,作为一种解决方法。
答案 1 :(得分:0)
组件中的变量数据源名称为Datasource,而html中的数据源为datasource
this.DataSource = res.recordset;
<md-table #table [dataSource]="dataSource">
您需要更改为:
<md-table #table [dataSource]="DataSource">
或将数据源更改为数据源。