Http以角度2获取请求以从放置在资产中的json文件获取数据

时间：2018-02-06 11:30:27

标签： angular angular-material http-get

我正在尝试从放置在我的资源文件夹中的json文件中获取数据。我在我的应用程序中使用了角度材质。

我创建了一个帐户组件，其中包含 account.component.ts，account.component.html，account.component.scss，accountdetail.service.ts 文件。

我使用角色素材的 mat-select 组件实现了一个简单的下拉列表，我通过创建filter.pipe.ts文件来应用搜索过滤器。

下面显示的是我的申请文件

app.module.ts 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { FilterPipe } from './filter.pipe';
import { FormsModule } from '@angular/forms';
import { HttpModule} from '@angular/http';

import { AppMaterialModule } from './app-material.module';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccountComponent } from './account/account.component';

import { AccoundetailService } from './account/accountdetail.service';



import './rxjs-operators';


@NgModule({
  declarations: [
    AppComponent,
    AccountComponent ,
    FilterPipe      
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AppMaterialModule,
    FormsModule ,
    HttpModule   
  ],
  providers: [AccoundetailService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

account.component.ts 

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

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



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

  providers: [AccoundetailService],
})


export class AccountComponent implements OnInit {

 filtertext:string;
 departments = [];


constructor(private _accdetailservice :AccountdetailService ) { }

ngOnInit(){
  this._accdetailservice.accountdetails()
  .subscribe(data => this.departments = 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 >
                          {{ dep.department }}
                        </mat-option>
                      </mat-select>
                    </mat-form-field>

<br/> <br/> <br/> 




<!-- 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>

accountdetail.service.ts 

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


@Injectable()
export class AccountdetailService {

  constructor(private _http:Http ) { }

  private _url="assets/accountdetails.json";

  accountdetails(){
  return this._http.get(this._url)
    .map((response:Response)=>response.json());
  }

}

我已经单独创建了app-material.module.ts来导入角度材质组件。

APP-material.module.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatToolbarModule,
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  MatSidenavModule,
  MatIconModule,
  MatExpansionModule,
  MatPaginatorModule,
  MatTableModule,
  MatChipsModule,
  MatSelectModule,
  MatTooltipModule,
  MatCheckboxModule,
  MatGridListModule,
  MatDialogModule
} from '@angular/material';

@NgModule({
  imports: [CommonModule],
  exports: [
  MatToolbarModule,
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  MatSidenavModule,
  MatIconModule,
  MatExpansionModule,
  MatPaginatorModule,
  MatTableModule,
  MatChipsModule,
  MatSelectModule,
  MatTooltipModule,
  MatCheckboxModule,
  MatGridListModule,
  MatDialogModule
   ]
})
export class AppMaterialModule {}

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet> `,
  })

export class AppComponent {}

APP-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AccountComponent } from './account/account.component';

const routes: Routes = [
  { path: 'account', component: AccountComponent},
  { path: '**', redirectTo: ''}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

filter.pipe.ts 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(departments1: any, filtertext: string) {
    if(filtertext=== undefined){
    return departments1;
    } else if(departments1)
    {
         return departments1.filter(function(department){
         return department.value.toLowerCase().includes(filtertext.toLowerCase());

         }) } }}

当我编译并运行我的应用程序时，我收到错误，如下所示

enter image description here

任何人都可以帮我解决这个问题并实现我部门下拉列表的获取请求。

1 个答案:

答案 0 :(得分：1)

这是一个简单的错误。您应该仔细查看代码并进行故障排除，而不是直接询问StackOverflow。您还应该缩短代码片段，以便我们可以直接跟踪错误的来源。

无论如何，这里的问题是你错误地拼写了你的服务。在您的服务文件中，它拼写为AccountdetailService，但在您的模块文件中，它被导入为AccoundetailService。这导致了问题。

app.module.ts：

import { AccountdetailService } from './account/accountdetail.service'; // <- Over here

@NgModule({
  // ...
  providers: [AccountdetailService]
  // ...
})
export class AppModule {}

accountdetail.service.ts：

@Injectable()
export class AccountdetailService {
  // ...
}

顺便说一句，您应该将服务重命名为AccountDetailService，因为“帐户”和“详细信息”完全是两个不同的单词，而“详细信息”一词应以大写字母“D”开头。这将遵循PascalCase语法。

相关问题
最新问题