如何实现获取服务以在角度2中将数据提取到我的mat-table中

Question

我使用 mat-selec t创建了一个名为部门的下拉列表，并为下拉列表应用了过滤器。

我创建了一个名为 accountdetail 的服务，我可以从json文件中将数据提取到部门下拉列表中。

我使用角度材料 mat-table 组件实现了表格，我希望从同一服务中获取数据到我的表格中。

下面显示的是我的accountdetail.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {RouterModule, Router} from '@angular/router';

@Injectable()
export class AccountdetailService {

  constructor(private http:Http ) { }

  accountdetails()
  {
    return this.http.get('http://localhost:4200/assets/accountdetails.json')
    .map(result => result.json());
  }}

account.component.ts

import {Component, ViewChild, Inject, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup } from '@angular/forms';

import {MatPaginator, MatTableDataSource} from '@angular/material';

import { AccountdetailService } from '../accountdetail.service';



@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.scss']

})


export class AccountComponent implements OnInit {

 filtertext:string;
 departments : any;


constructor( private accdetailservice: AccountdetailService ) { }

ngOnInit(){
  this.accdetailservice.accountdetails()
  .subscribe(data => this.departments = data);


  //.subscribe(data => {console.log(data)})
}



  /* Table Starts here
  ---------------------- */
 displayedColumns1 = ['accno', 'accdesc', 'investigator', 'accCPC','location','cdeptid','depdesc'];
  dataSource1= new MatTableDataSource<Element>(ELEMENT_DATA);


  @ViewChild(MatPaginator) paginator: MatPaginator;

   ngAfterViewInit() {
    this.dataSource1.paginator = this.paginator;
  }
}

export interface Element {
  accno: number;
  accdesc: string;
  investigator: string;
  accCPC: string;
  location:string;
  cdeptid: number;
  depdesc: string;
}

const ELEMENT_DATA: Element[] = [
  {accno: 5400343, accdesc: 'ASTRALIS LTD', investigator:'Kruger, James G.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'},

  {accno: 5400344, accdesc: 'ASTRALIS LTD', investigator:'Gelbard, Alyssa.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'}

];

account.component.html

<mat-toolbar color="primary" style="width:100%"> WELCOME </mat-toolbar><br/>

<h3>Department</h3><br/>

            <mat-form-field>
                      <mat-select style="min-width: 200px;" placeholder="Type to search" [(value)]="dept">
                      <input class="input1" matInput type="text" [(ngModel)]="filtertext">
                        <mat-option *ngFor="let dep of departments  | filter:filtertext  " [value]="dep.department" >
                          {{ dep.department }}
                        </mat-option>
                      </mat-select>
                    </mat-form-field>


<!-- Table starts here -->

<mat-card>
<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource1">

    <!-- Account No. Column -->
    <ng-container matColumnDef="accno">
      <mat-header-cell *matHeaderCellDef> Account No. </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.accno}}</mat-cell>
    </ng-container>

    <!-- Account Description Column -->
    <ng-container matColumnDef="accdesc">
      <mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.accdesc}} </mat-cell>
    </ng-container>

    <!-- Investigator Column -->
    <ng-container matColumnDef="investigator">
      <mat-header-cell *matHeaderCellDef> Investigator </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.investigator}} </mat-cell>
    </ng-container>

    <!-- Account CPC Column -->
    <ng-container matColumnDef="accCPC">
      <mat-header-cell *matHeaderCellDef> Account CPC </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.accCPC}}</mat-cell>
    </ng-container>

     <!-- Location Column -->
    <ng-container matColumnDef="location">
      <mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.location}}</mat-cell>
       </ng-container>


     <!-- Client Dept ID Column -->
    <ng-container matColumnDef="cdeptid">
      <mat-header-cell *matHeaderCellDef> ClientDeptID </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.cdeptid}}</mat-cell>
       </ng-container>


    <!-- Dept Description Column -->
    <ng-container matColumnDef="depdesc">
      <mat-header-cell *matHeaderCellDef> Dept Description  </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.depdesc}}</mat-cell>
       </ng-container>


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

  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>
</div>
</mat-card>

我想知道如何在 accountcomponent.ts 文件中更改我的表格代码段并订阅服务中的数据。

任何人都可以引导我通过这个.....？

Answer 1

请试试这个：

ngOnInit(){
  this.accdetailservice.accountdetails()
  .subscribe(data => {
     this.departments = data;
     // Add this row
     this.dataSource1.data = data;
  });
}

就像你知道Angular 4.3我认为你应该使用HttpClient而不是Http