Question

我很难编写Angular Material Mat-Sort功能的代码。 A dureing声明我的变量dataSource：

类型'Observable'的参数不能分配给'any []'类型的参数。 “Observable”类型中缺少属性长度。

你有什么想法可以尝试吗？您可以在下面找到我的component.ts和相关service.ts的代码

component.ts

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { Location } from '@angular/common';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';

import { MatTableDataSource, MatSort } from '@angular/material';

import { Report } from './../../models/report';
import { RepGenService } from './../../services/rep-gen.service';

@Component({
    selector: 'app-rep-gen-report',
    templateUrl: './rep-gen-report.component.html',
    styleUrls: ['./rep-gen-report.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class RepGenReportComponent implements OnInit {
    reports: Report[];

    dataSource = new MyDataSource(this.repGenService);
    //dataSource = new MatTableDataSource(this.repGenService.getReport()); // <--- error, not working
    displayedColumns = ['report_id', 'caption'];

    constructor(private repGenService: RepGenService, private location: Location) { }

    ngOnInit() {
        this.getRepGen_Report();
    }

    getRepGen_Report(): void {
        this.repGenService.getReport()
            .subscribe(reports => this.reports = reports);
    }

    save(reports: Report[]) {
        this.repGenService.setReport(this.reports);
    }

    goBack(): void {
        this.location.back();
    }

    //@ViewChild(MatSort) sort: MatSort;
    //ngAfterViewInit() {
    //    this.dataSource.sort = this.sort;  // therefor I need the imported MatTableDataSource
    //}
}

export class MyDataSource extends DataSource<any> {
    constructor(private repGenService: RepGenService) {
        super();
    }
    connect(): Observable<Report[]> {
        return this.repGenService.getReport();
    }
    disconnect() { }
}

service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class RepGenService {

    constructor(public http: HttpClient) { }

    getReport(): Observable<any> {
        return this.http.get('/api/repGen_Report')
            .map(response => response);
    }

    setReport(reports) {
        this.http.post('/api/repGen_Report/update', reports
        ).subscribe();
    }
}

谢谢！

编辑：我更新了component.ts

Answer 1

问题是在调用getRepGen_Report()之前未加载您的回复。

您必须订阅才能在回调中获得回复 - ＆gt; http.get是异步方法，你必须使用promises或像这样的小hack（在大括号内设置dataSource：

view: any[] = [];
    this.repGenService.get().subscribe(res => {
this.view = res;
this.dataSource = new TableDataSource(this.view);
})

在此之后你应该声明扩展DataSource的类TableDataSource并在构造函数super中实现并实现方法connect() and disconnect()

编辑：

dataSource: MatTableDataSource;

ngOnInit() {
    this.repGenService.get().subscribe(res => {
      this.view = res;
      this.dataSource = new MatTableDataSource(this.view);
    });
  }

     export class MatTableDataSource extends DataSource<any>{
constructor(private view:any[]){
    super();
  }
  connect(): Observable<any[]>{
      return this.view;
  }
  disconnect(){}
}

实现MatSort - 参数不可分配

1 个答案: