Angular 5 Material datatable 'this.dataSource.connect не является функцией' - PullRequest
Новая
       23

Angular 5 Material datatable 'this.dataSource.connect не является функцией'

0 голосов
/ 11 июня 2018

Я застрял в этом выпуске с последних 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
...