如何将从服务接收到的 json 数据传递到 Angular 4 的角材料组件中的数组

Posted 2023-03-13

【中文标题】如何将从服务接收到的 json 数据传递到 Angular 4 的角材料组件中的数组

【英文标题】：How to pass json data received from service to an array in component in angular material for angular 4

【发布时间】：2018-05-13 00:42:01

【问题描述】：

我是 Angular 4 和角度材料的新手，我正在尝试将带有 http、分页、排序和过滤的角度材料数据表添加到我的仪表板组件中，使用硬编码数组我能够实现过滤、排序和分页。但我无法将服务中的 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"
]

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>

【参考方案1】：

我猜您对在表中加载数据的两种不同方式感到困惑。从您的 component.service，特别是“FleetDataService”类的外观来看，您正试图获得 Observable 响应。对于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 的任何内容。

【讨论】：

嘿@Rahul：非常感谢，在发布问题后我做了一些挖掘，我也使用了与方法1中提到的相同的方法，我能够得到我想要的东西..!!!!再次感谢队友