如何实现获取服务以 Angular 2 将数据提取到我的 mat-table 中 [英] How to implement get service to fetch data into my mat-table in angular 2

问题描述

我使用 ma​​t-select 创建了一个名为 department 的下拉列表，并为下拉列表应用了过滤器.

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

我已经使用角材料 ma​​t-table 组件实现了表格，我想从同一个服务中获取数据到我的表格中.

下面是我的 accountdetail.service.ts

import { Injectable } from '@angular/core';从 '@angular/http' 导入 { Http };导入 'rxjs/add/operator/map';从@angular/router"导入 {RouterModule, Router}；@Injectable()导出类 AccountdetailService {构造函数(私有 http:Http){}帐户详细资料(){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';从'@angular/forms'导入{FormControl}；从 'rxjs/Observable' 导入 { Observable };导入 'rxjs/add/operator/map';从'@angular/forms'导入{ReactiveFormsModule}；从@angular/forms"导入{FormGroup}；从@angular/material"导入 {MatPaginator, MatTableDataSource}；从 '../accountdetail.service' 导入 { AccountdetailService };@成分({选择器:'应用程序帐户'，templateUrl: './account.component.html',styleUrls: ['./account.component.scss']})导出类 AccountComponent 实现 OnInit {过滤文本:字符串；部门:任何；构造函数(私人accdetailservice:AccountdetailService){}ngOnInit(){this.accdetailservice.accountdetails().subscribe(data => this.departments = data);//.subscribe(data => {console.log(data)})}/* 表格从这里开始--------------- */displayColumns1 = ['accno', 'accdesc', 'investigator', 'accCPC','location','cdeptid','depdesc'];dataSource1= new MatTableDataSource(ELEMENT_DATA);@ViewChild(MatPaginator) 分页器:MatPaginator；ngAfterViewInit() {this.dataSource1.paginator = this.paginator;}}导出接口元素{acno: 号码;accdesc:字符串；调查员:字符串；accCPC:字符串；位置:字符串；cdeptid:编号；depdesc:字符串；}const ELEMENT_DATA: 元素 [] = [{accno: 5400343, accdesc: 'ASTRALIS LTD', 调查员:'Kruger, James G.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'},{accno: 5400344, accdesc: 'ASTRALIS LTD', 调查员:'Gelbard, Alyssa.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'}];

account.component.html

欢迎</mat-toolbar><br/><h3>部门</h3><br/><mat-form-field><mat-select style="min-width: 200px;"placeholder="要搜索的类型" [(value)]="dept"><input class="input1" matInput type="text" [(ngModel)]="filtertext"><mat-option *ngFor="让部门的部门| filter:filtertext " [value]="dep.department" >{{ 部门}}</mat-option></mat-select></mat-form-field><!-- 表格从这里开始--><垫卡><div class="example-container mat-elevation-z8"><mat-table #table [dataSource]="dataSource1"><!-- 账号栏--><ng-container matColumnDef="accno"><mat-h​​eader-cell *matHeaderCellDef>帐号</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.accno}}</mat-cell></ng-容器><!-- 账户描述栏--><ng-container matColumnDef="accdesc"><mat-h​​eader-cell *matHeaderCellDef>账户描述 </mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.accdesc}} </mat-cell></ng-容器><!-- 调查员栏--><ng-container matColumnDef="调查员"><mat-h​​eader-cell *matHeaderCellDef>调查员</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.investigator}} </mat-cell></ng-容器><!-- 帐户每次点击费用列 --><ng-container matColumnDef="accCPC"><mat-h​​eader-cell *matHeaderCellDef>帐户每次点击费用 </mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.accCPC}}</mat-cell></ng-容器><!-- 位置列--><ng-container matColumnDef="location"><mat-h​​eader-cell *matHeaderCellDef>位置</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.location}}</mat-cell></ng-容器><!-- 客户部门 ID 列 --><ng-container matColumnDef="cdeptid"><mat-h​​eader-cell *matHeaderCellDef>ClientDeptID </mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.cdeptid}}</mat-cell></ng-容器><!-- 部门描述栏--><ng-container matColumnDef="depdesc"><mat-h​​eader-cell *matHeaderCellDef>部门描述</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.depdesc}}</mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="displayedColumns1" ></mat-h​​eader-row><mat-row *matRowDef="让行；列:displayColumns1;"></mat-row></mat-table><mat-paginator #paginator[页面大小]="10"[pageSizeOptions]="[5, 10, 20]"></mat-paginator>

</mat-card>

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

有人可以指导我完成这个吗.....?

解决方案

请试试这个:

ngOnInit(){this.accdetailservice.accountdetails().订阅(数据=> {this.departments = 数据；//添加这一行this.dataSource1.data = 数据；});}

我认为从 Angular 4.3 开始，你应该使用 HttpClient 而不是 Http

I have created a dropdown with name department using the mat-select and applied filter for the dropdown.

I created a service with name accountdetail from which i can fetch data from a json file into the department dropdown.

I have implemented the table using angular materials mat-table component and i want fetch data from the same service in to my table.

Below shown is my 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>

I want to know how can i change my table code snippet in my accountcomponent.ts file and subscribe the data from the service.

can anybody please guide me through this.....?

解决方案

Please try this :

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

Just so you know since Angular 4.3 i think, you should use HttpClient instead of Http

这篇关于如何实现获取服务以 Angular 2 将数据提取到我的 mat-table 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！