如何將從服務接收的json數據傳遞給angular 4的組件中數組

Question

我是Angular 4和Angle Material的新手，我試圖將帶有http，分頁，排序和過濾功能的Angular Material數據表添加到我的儀表板組件中，通過硬編碼數組，我能夠實現過濾，排序和分頁功能。 但是我無法將json數據從服務傳遞到數組中。

任何幫助，將不勝感激。 提前致謝..！！！

請在下面找到我的代碼。

test.json

[{
 "FirstName": "Jill",
 "LastName": "Smith",
 "Score": "disqualified"
}, {
 "FirstName": "Eve",
 "LastName": "Jackson",
 "Score": "94"
}, {
 "FirstName": "John",
 "LastName": "Doe",
 "Score": "80"
}, {
 "FirstName": "Adam",
 "LastName": "Johnson",
 "Score": "67"
}]

組件服務

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpModule, Http, Response, Headers, RequestOptions } from 
'@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { User } from '../models/fleetData.model';

@Injectable()
export class FleetDataService {
 private serviceUrl = '../../assets/data/test.json';
  constructor(private http: HttpClient) { }
    getFleetData(): Observable<User[]> {
  return this.http.get<User[]>(this.serviceUrl);
 }

}

component.ts

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { FleetDataService } from '../../services/fleet-data.service';
import { LoaderService } from '../../services/loader.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../../models/fleetData.model';
import {MatPaginator, MatTableDataSource, MatSort} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent implements AfterViewInit {
  // dataSource = new UserDataSource(this.getFleetData);
  displayedColumns = ['First Name', 'Last Name', 'Score'];
  dataSource = new MatTableDataSource<User>(ELEMENT_DATA);
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults 
    to lowercase matches
    this.dataSource.filter = filterValue;
  }
  constructor(private getFleetData: FleetDataService, private loaderService: 
   LoaderService) { }
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
    }
  }
  const ELEMENT_DATA: User[] = 
  [{
    "FirstName": "Jill",
    "LastName": "Smith",
    "Score": "disqualified"
   }, {
    "FirstName": "Eve",
    "LastName": "Jackson",
    "Score": "94"
   }, {
    "FirstName": "John",
    "LastName": "Doe",
    "Score": "80"
   }, {
    "FirstName": "Adam",
    "LastName": "Johnson",
    "Score": "67"
   },{
     "FirstName": "Jill",
     "LastName": "Smith",
     "Score": "disqualified"
    }, {
     "FirstName": "Eve",
     "LastName": "Jackson",
     "Score": "94"
    }, {
     "FirstName": "John",
     "LastName": "Doe",
     "Score": "80"
    }, {
    "FirstName": "Adam",
    "LastName": "Johnson",
    "Score": "67"
   },{
    "FirstName": "Jill",
    "LastName": "Smith",
    "Score": "disqualified"
   }, {
    "FirstName": "Eve",
    "LastName": "Jackson",
    "Score": "94"
   }, {
    "FirstName": "John",
    "LastName": "Doe",
    "Score": "80"
   }, {
    "FirstName": "Adam",
    "LastName": "Johnson",
    "Score": "67"
   },{
    "FirstName": "Jill",
    "LastName": "Smith",
    "Score": "disqualified"
   }, {
    "FirstName": "Eve",
    "LastName": "Jackson",
    "Score": "94"
   }, {
    "FirstName": "John",
    "LastName": "Doe",
    "Score": "80"
   }, {
    "FirstName": "Adam",
    "LastName": "Johnson",
    "Score": "67"
   }]
   export class UserDataSource extends DataSource<any> {
    constructor(private getFleetData: FleetDataService) {
    super();
   }
    connect(): Observable<User[]> {
     return this.getFleetData.getFleetData();
   }
    disconnect() {}
  }

component.html

<h1>Hi Dashboard</h1>
<div class="example-header">
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" 
    placeholder="Filter">
  </mat-form-field>
</div>
<div class="example-container mat-elevation-z8">
  <mat-table [dataSource]="dataSource" matSort>
    <!-- First Name Column -->
  <ng-container matColumnDef="First Name">
    <mat-header-cell *matHeaderCellDef mat-sort-header> First Name </mat-
      header-cell>
    <mat-cell *matCellDef="let user"> {{user.FirstName}} </mat-cell>
  </ng-container>
    <!-- Last Name Column -->
  <ng-container matColumnDef="Last Name">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </mat-
      header-cell>
    <mat-cell *matCellDef="let user"> {{user.LastName}} </mat-cell>
  </ng-container>
   <!-- Score Column -->
  <ng-container matColumnDef="Score">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Score </mat-header-
      cell>
    <mat-cell *matCellDef="let user"> {{user.Score}} </mat-cell>
  </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;">
  </mat-row>
</mat-table>

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

Answer 1

我猜您對在表中加載數據的兩種不同方式感到困惑。 從component.service的外觀，尤其是'FleetDataService'類的外觀，您正在嘗試獲取可觀察到的響應。 對於component.ts，正確的方法可能如下所示：

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { FleetDataService } from '../../services/fleet-data.service';
import { LoaderService } from '../../services/loader.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../../models/fleetData.model';
import {MatPaginator, MatTableDataSource, MatSort} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent implements AfterViewInit {
  fleetData = null;
  dataSource = new MatTableDataSource(this.fleetData);
  displayedColumns = ['First Name', 'Last Name', 'Score'];

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults 
    to lowercase matches
    this.dataSource.filter = filterValue;
  }
  constructor(private getFleetData: FleetDataService, private loaderService: 
   LoaderService) { 
   getFleetData.getFleetData().subscribe(
   data => {
    this.fleetData = data;
    this.dataSource.data = this.fleetData;  
   });
   }
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
    }
  }

類似地，在上面的示例中，您嘗試的可以通過另一種方式完成，如下所示：

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { FleetDataService } from '../../services/fleet-data.service';
import { LoaderService } from '../../services/loader.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../../models/fleetData.model';
import {MatPaginator, MatTableDataSource, MatSort} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent implements AfterViewInit {

  displayedColumns = ['First Name', 'Last Name', 'Score'];
  dataSource = new MatTableDataSource<User>(ELEMENT_DATA);
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults 
    to lowercase matches
    this.dataSource.filter = filterValue;
  }
  constructor(private getFleetData: FleetDataService, private loaderService: 
   LoaderService) { }
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
    }
  }

  const ELEMENT_DATA: User[] = 
  [{
    "FirstName": "Jill",
    "LastName": "Smith",
    "Score": "disqualified"
   }, {
    "FirstName": "Eve",
    "LastName": "Jackson",
    "Score": "94"
   }, {
    "FirstName": "John",
    "LastName": "Doe",
    "Score": "80"
   }, {"FirstName": "Adam",
    "LastName": "Johnson",
    "Score": "67"
   },{
     "FirstName": "Jill",
     "LastName": "Smith",
     "Score": "disqualified"
    }, {
     "FirstName": "Eve",
     "LastName": "Jackson",
     "Score": "94"
    }, {
     "FirstName": "John",
     "LastName": "Doe",
     "Score": "80"
    }, {
    "FirstName": "Adam",
    "LastName": "Johnson",
    "Score": "67"
   },{
    "FirstName": "Jill",
    "LastName": "Smith",
    "Score": "disqualified"
   }, {
    "FirstName": "Eve",
    "LastName": "Jackson",
    "Score": "94"
    }, {
    "FirstName": "John",
    "LastName": "Doe",
    "Score": "80"
   }, {
    "FirstName": ""Adam",
    "LastName": "Johnson",
    "Score": "67"
   },{
    "FirstName": "Jill",
    "LastName": "Smith",
    "Score": "disqualified"
   }, {
    "FirstName": "Eve",
    "LastName": "Jackson",
    "Score": "94"
   }, {
    "FirstName": "John",
    "LastName": "Doe",
    "Score": "80"
   }, {
    "FirstName": "Adam",
    "LastName": "Johnson",
    "Score": "67"
   }];

另外，我在您的代碼中看到很多問題。 我希望您不要為MatPaginator和MatSort錯過任何事情。