Angular 5 Material数据表'this.dataSource.connect不是函数'

时间:2018-06-10 23:00:03

标签: angular angular-material angular-datatables

自从过去2天以来,我一直困在这个问题上。我试图从我的json文件中获取json数据到材料5数据表。公司是我的界面。使用服务获取返回对象的数据。我在MatTableDataSource中获取数据。但是它没有打印在表格中。我在MatTableDataSource中传递了数组。但仍然没有用。请帮忙!

        import { Component, OnInit, ViewChild } from '@angular/core';
         // import { DataTableDataSource } from './data-table-datasource';

        import { RecordsService } from '../../services/records.service';
        import { Observable } from 'rxjs';
        import { MatSort, MatSortable, MatTableDataSource } from '@angular/material';

        import { Company } from '../../models/classes/company';


        @Component({
          selector: 'data-table',
          templateUrl: './data-table.component.html',
          styleUrls: ['./data-table.component.css']
        })
        export class DataTableComponent implements OnInit {
          records: Array<any>;
          dataSource;
          displayedColumns = ['accountId', 'currency']; // , 'Account Number', 'Sort Code', 'Price'

          constructor(private recService: RecordsService) {}
          ngOnInit() {
            this.recService.getResults().subscribe( results => {
              // if (!results) {
              //   return;
              // }
              let ds = new MatTableDataSource(results);
              this.dataSource = ds.data;
              console.log(this.dataSource);
            });
          }
        }

    //HTML

    <div class="mat-elevation-z8">
      <mat-table #table [dataSource]="dataSource?.content">

        <!-- Id Column -->
        <ng-container matColumnDef="accountId">
          <mat-header-cell *matHeaderCellDef>AccountId</mat-header-cell>
          <mat-cell *matCellDef="let record">{{record.accountId}}</mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="currency">
          <mat-header-cell *matHeaderCellDef>Currency</mat-header-cell>
          <mat-cell *matCellDef="let record">{{record.currency}}</mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns" color="primary"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>


    </div>

以下是我的服务文件:

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import 'rxjs/add/operator/map';
    import { Observable } from 'rxjs/Observable';

    import { Company } from '../models/classes/company';

    @Injectable()
    export class RecordsService {
      private record: Company[];
      private dataURL = '../../assets/data/results.json';
      constructor(private http: HttpClient) { }

      getResults(): Observable<Company[]> {
       return this.http.get<Company[]>(this.dataURL);
       }
    }


My error is below:
ERROR TypeError: this.dataSource.connect is not a function

0 个答案:

没有答案