Question

在Angular应用中，我正在使用

从数据库加载数据

data.service.ts

import {Injectable} from '@angular/core';
import {Post} from '../Post';
import {Observable, of} from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {

constructor(private http: HttpClient) {
}

getData(): Observable<Post[]> {
    return this.http.get<Post[]>('http://localhost:80/Findall');
}

getCategories() {
    return this.categories;
}

findCaldera(index: string) {
    console.log('find: ' + index);
    return this.http.get('http://localhost:80/Find/' + index);
}

updateCaldera(index: string, data) {
    console.log('find: ' + index);
    return this.http.put('http://localhost:80/Update/' + index, data);
}

addPost(data) {
    console.log('add: ' + JSON.stringify(data));
    return this.http.post<Post>('http://localhost:80/Add', data);
}

deletePost(index: string) {
    console.log('delete: ' + index);
    return this.http.delete('http://localhost:80/Delete/' + index,     {responseType:'text'});
}
}

因此，这将返回一个可观察到的显示数据的仪表板

dashboard.component.ts

import {Component, ViewChild} from '@angular/core';
import {DataService} from '../data/data.service';
import {Post} from '../Post';
import {DataSource} from '@angular/cdk/table';
import {Observable} from 'rxjs/Observable';
import {AuthService} from '../auth.service';

import {PostDialogComponent} from '../post-dialog/post-dialog.component';
import {EditComponent} from '../edit/edit.component';
import {MatDialog, MatSort, MatTableDataSource} from '@angular/material';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {
  constructor(private dataService: DataService, public auth: AuthService, public dialog: MatDialog) {
  }
  @ViewChild(MatSort) sort: MatSort;

  displayedColumns = ['Borrower1','_id', 'edit','delete'];
  dataSource: PostDataSource |null;
  ngOnInit(){
    this.dataSource = new PostDataSource(this.dataService, this.sort);
  }

  ngAfterViewInit(){
    this.sort.sortChange.subscribe(()=>{console.log(this.dataSource)});
  }


  deletePost(id) {
    if (this.auth.isAuthenticated()) {
      this.dataService.deletePost(id).subscribe(()=>{
        this.dataSource = new PostDataSource(this.dataService, this.sort);
      }); 
    } else {
      alert('Login in Before');
    }
  }

  editDialog(id): void {
    let dialogRef = this.dialog.open(EditComponent, {
      width: '100%',
      data: id,

    });
    dialogRef.componentInstance.event.subscribe((result) => {
      console.log(result.data)
      this.dataSource = new PostDataSource(this.dataService, this.sort);
    });
  }

  openDialog(): void {
    let dialogRef = this.dialog.open(PostDialogComponent, {
      width: '100%',
      data: 'Add Post'
    });
    dialogRef.componentInstance.event.subscribe((result) => {
      console.log(result.data)
      this.dataService.addPost(result.data).subscribe(()=>{
        this.dataSource = new PostDataSource(this.dataService, this.sort);
      });
    });
  }
}



export class PostDataSource extends DataSource<any> {
  constructor(private dataService: DataService, private _sort: MatSort) {
    super();
  }

  connect(): Observable<Post[]> {
    console.log("hi1")
    return this.dataService.getData();
  }

  disconnect() {
  }
}

当我单击html页面上的排序箭头时，会发出一个事件，正如我从this.sort.sortChange.subscribe(()=>{console.log(this.dataSource)});看到的那样

在数据源中，_sort属性更改以反映我通过单击视图中的排序箭头进行的更改，即1单击dataSource._sort.order = "asc"之后又单击dataSource._sort.order = "desc"。但是，表中的数据不会更改。有很多使用MatTableDataSource的示例，但是我已经读到，使用http来获取数据时，使用MatTableDataSource并不是一个好习惯。

谢谢

Answer 1

将MatSort与异步数据一起使用时，您应该侦听排序更改，并针对每个更改进行调用以获取排序的数据。

这里是一个例子。希望有帮助。

Stackblitz example

即使我的数据源_sort变量确实发生变化，Mat-sort也无法正常工作

1 个答案: