如何将从服务接收的json数据传递到angular 4的angular材料组件中的数组 [英] How to pass json data received from service to an array in component in angular material for angular 4

问题描述

我是Angular 4和角度材料的新手，我试图将带有http，分页，排序和过滤的角度材料数据表添加到我的仪表板组件中，通过硬编码数组，我能够实现过滤，排序和分页.但是我无法将json数据从服务传递到数组中.

I am new to Angular 4 and angular material and i am trying to add the angular material data table with http, pagination, sorting and filtering into my dashboard component, With hard-coded array i was able to achieve filter, sort and pagination. But i am not able to pass a json data from service into the array.

任何帮助将不胜感激. 预先谢谢.. !!!

Any help would be appreciated. Thanks in advance..!!!

请在下面找到我的代码.

Please find my code below.

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"
}]

component.service

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>

推荐答案

我想您对在表中加载数据的两种不同方式感到困惑.从component.service的外观，尤其是'FleetDataService'类的外观，您正在尝试获取可观察到的响应.对于component.ts，正确的方法可能如下所示:

I guess you are confused with two different ways to load data in the table. From the looks of your component.service, specifically 'FleetDataService' class, you are trying to get and Observable response. The correct way could be as below, for 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;
    }
  }

类似地，在上面的示例中，您尝试的可以通过另一种方式完成，如下所示:

Similarly in the above example, what you are trying , can be done in another way, as shown below:

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错过任何事情.

Also I see lot of problems in your code. I hope you did not miss anything for MatPaginator and MatSort.

这篇关于如何将从服务接收的json数据传递到angular 4的angular材料组件中的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！