angular 2 中的 Http get 请求从放置在资产中的 json 文件中获取数据

Question

我正在尝试从放置在我的资产中的 json 文件中获取数据 folder.I 我正在我的应用程序中使用 angular material。

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

我已经使用 angular material 的 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 来导入 angular material 组件。

应用-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 {}

应用-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());

         }) } }}

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

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

Answer 1

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

无论如何，这里的问题是你拼错了你的服务。在您的服务文件中，它拼写为 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，因为 "account" 和 "detail" 完全是两个不同的词，并且 "detail" 应该以大写字母开头字母 "D" 代替。这将遵循 PascalCase 语法。

angular 2 中的 Http get 请求从放置在资产中的 json 文件中获取数据

Http get request in angular 2 to fetch data from a json file placed in assets

http-get

angular-material

angular