[解決済み] AngularのmatSortがソートされない
質問
matSort を matTable にインポートするのに苦労しています。
私のコードを提供します。
dashboard.component.ts
import {Component, ViewChild} from '@angular/core';
import {UserService} from "../user.service";
import {DohvatMantisaService} from "../dohvat-mantisa.service";
import {Mantisi} from "../Mantisi";
import {Observable} from "rxjs/Observable";
import {DataSource} from "@angular/cdk/collections";
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import {MatSort} from '@angular/material';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent{
displayedColumns = ['projekt', 'manits', 'kategorija','ozbiljnost','datum_prijave','postavio','odjel','postavio','naziv','status','planirana_isporuka'];
constructor(private user:UserService, private dohvatMantisa:DohvatMantisaService) {
}
dataSource: TableDataSource | null;
mantisi: Mantisi[];
name = this.user.getUsername();
@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
this.dataSource = new TableDataSource(this.dohvatMantisa,this.sort);
}
}
export class TableDataSource extends DataSource<Mantisi>{
constructor(private mantisiDS: DohvatMantisaService,private sort: MatSort){
super();
}
connect(): Observable<Mantisi[]> {
const displayDataChanges = [
this.mantisiDS.dohvatiMantise(),
this.sort.sortChange,
];
return Observable.merge(...displayDataChanges).map(() => {
return this.getSortedData();
});
}
disconnect() {}
getSortedData(): Mantisi[]{
const data = this.mantisiDS.prikazMantisa().slice();
if (!this.sort.active || this.sort.direction == '') { return data; }
return data.sort((a, b) => {
let propertyA: number|string = '';
let propertyB: number|string = '';
switch (this.sort.active) {
case 'projekt': [propertyA, propertyB] = [a.projekt, b.projekt]; break;
case 'manits': [propertyA, propertyB] = [a.manits, b.manits]; break;
case 'kategorija': [propertyA, propertyB] = [a.kategorija, b.kategorija]; break;
case 'ozbiljnost': [propertyA, propertyB] = [a.ozbiljnost, b.ozbiljnost]; break;
case 'datum_prijave': [propertyA, propertyB] = [a.datum_prijave, b.datum_prijave]; break;
case 'postavio': [propertyA, propertyB] = [a.postavio, b.postavio]; break;
case 'naziv': [propertyA, propertyB] = [a.naziv, b.naziv]; break;
case 'status': [propertyA, propertyB] = [a.status, b.status]; break;
case 'planirana_isporuka': [propertyA, propertyB] = [a.planirana_isporuka, b.planirana_isporuka]; break;
}
let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
let valueB = isNaN(+propertyB) ? propertyB : +propertyB;
return (valueA < valueB ? -1 : 1) * (this.sort.direction == 'asc' ? 1 : -1);
});
}
}
これは私のサービスです。 ドゥヴァットマンティササービス
import { Injectable } from '@angular/core';
import {Http, Response, RequestOptions, Headers} from "@angular/http";
import {Observable} from "rxjs/Observable";
import {Mantisi} from "./Mantisi";
import 'rxjs';
import 'rxjs/operator/map';
import 'rxjs/operator/do';
@Injectable()
export class DohvatMantisaService {
constructor(public http:Http) { }
result: Mantisi[];
dohvatiMantise(): Observable<Mantisi[]>{
return this.http.get('/mantis/getMantisReport').map(this.extractData);
}
private extractData(response: Response) {
let body = response.json();
return body || {};
}
prikazMantisa(): Mantisi[]{
this.dohvatiMantise().subscribe(res => this.result = res);
return this.result;
}
}
そして、私のdashboard.component.html matSort行を提供します。
<mat-table #table [dataSource]="dataSource" class="example-table" matSort>
ここでの主な問題は、httpリクエストからデータをロードして取得するのですが、コンソールに次のようなエラーが表示されることです。
未定義のプロパティ 'sortChange' を読み取ることができません。 at TableDataSource.webpackJsonp.../.../.../src/app/dashboard/dashboard.component.ts.TableDataSource.connect (dashboard.component.ts:36) at MatTable.webpackJsonp.../.../cdk/esm5/table.es5.js.CdkTable._observeRenderChanges (table.es5.js:602) at MatTable.webpackJsonp.../.../cdk/esm5/table.es5.js.CdkTable.ngAfterContentChecked (table.es5.js:522)
次のように表示されます。 この.sort.sortChange が未定義です。 インターネットをくまなく探したのですが、適切な答えが見つかりませんでした。あなたがそれを私を助けることができることを願っています。
どのように解決するのですか?
この問題の解決策を見つけました。
主な問題は、データが到着する前にテーブルがレンダリングされることでした。私は最初にデータをロードし、それをソースのようにdataSourceコンストラクタに送りました。その後、問題はなくなりました。これが非同期のhttp.getとサービスの問題です。
ありがとうございました。
fetchData(id){
this.fetch.getProcesses(id).subscribe(result => {
this.processes = result;
this.dataSource = new TableDataSource(this.processes);
Observable.fromEvent(this.filter.nativeElement, 'keyup')
.debounceTime(150)
.distinctUntilChanged()
.subscribe(() => {
if (!this.dataSource) {
return;
}
this.dataSource.filter = this.filter.nativeElement.value;
});
});
}
export class TableDataSource extends DataSource<Proces>{
_filterChange = new BehaviorSubject('');
get filter(): string {
return this._filterChange.value;
}
set filter(filter: string) {
this._filterChange.next(filter);
}
filteredData: any =[];
constructor(private processes:Proces[]){
super();
}
connect(): Observable<Proces[]>{
const displayDataChanges = [
this.processes,
this._filterChange,
];
return Observable.merge(...displayDataChanges).map(() => {
this.filteredData = this.processes.slice().filter((item: Proces) => {
const searchStr = (item.name).toLowerCase();
return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
});
return this.filteredData;
})
}
disconnect(){}
}
<div class="header">
<mat-form-field floatPlaceholder="never">
<input matInput #filter placeholder="Pretraži procese">
</mat-form-field>
</div>
<mat-table #table [dataSource]="dataSource" class="table-mantis" matSort>
<ng-container matColumnDef="col1">
<mat-header-cell *matHeaderCellDef class="table-header-cell" mat-sort-header> Name</mat-header-cell>
<mat-cell *matCellDef="let row" class="example-cell" > {{row.nazivProcesa}} </mat-cell>
</ng-container>
<ng-container matColumnDef="col2">
<mat-header-cell *matHeaderCellDef class="table-header-cell" mat-sort-header> Cell 2</mat-header-cell>
<mat-cell *matCellDef="let row" class="example-cell" > {{row.nazivVlasnika
}} </mat-cell>
</ng-container>
<ng-container matColumnDef="col3">
<mat-header-cell *matHeaderCellDef class="table-header-cell" mat-sort-header> Cell 3</mat-header-cell>
<mat-cell *matCellDef="let row" class="example-cell" > {{row.interniAkt}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns" class="example-header-row"></mat-header-row>
<mat-row class="example-row" *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
関連
-
[解決済み】「ルーター・アウトレット」は既知の要素ではない
-
[解決済み] Angular 2 ルーターベースなし href = "/stock/stock_detail.html?
-
[解決済み] AngularのmatSortがソートされない
-
[解決済み] Angular 2でディレイを作成する方法
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み] Angularプロジェクトごとに生成される膨大な数のファイル
-
[解決済み] Angularの@Directiveと@Componentの比較
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 2で簡単なアコーディオンを作成するにはどうすればよいですか?
-
[解決済み] Angular 2のコンポーネントプロパティにデフォルト値を設定する方法は?
-
[解決済み] NgModule が見つかりませんでした。NgModule でのインポートをスキップするには skip-import オプションを使用します。
-
[解決済み] Uncaught (in promise): Ionic 2でcordova_not_available。
-
[解決済み] Angular 2でディレイを作成する方法
-
[解決済み] 安全でない値」の例外を発生させずに <iframe src="..."> を設定するにはどうしたらよいですか?
-
[解決済み] このメソッドをリファクタリングして、認知的複雑度を21から許容される15に下げます。リファクタリングして複雑さを軽減する方法
-
[解決済み] Angularで電話番号の入力をフォーマットする
-
[解決済み] モジュール 'ngx-cookie-service' が見つかりません。
-
[解決済み] Angular 6でmouseoverとmouseoutを使用する方法