Http在angular 2中获取请求以从放置在资产中的json文件中获取数据 [英] Http get request in angular 2 to fetch data from a json file placed in assets

问题描述

我试图从放置在资产文件夹中的json文件中获取数据.我在应用程序中使用了角形材料.

I am trying to fetch data from a json file placed in my assets folder.I am using angular material in my application.

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

I have created a account component which has account.component.ts,account.component.html,account.component.scss,accountdetail.service.ts files.

我已经使用角材料的 mat-select 组件实现了一个简单的下拉菜单，为此我创建了filter.pipe.ts文件，对其应用了搜索过滤器.

I have implemented a simple dropdown using mat-select component of angular material for which i applied search filter by creating filter.pipe.ts file.

下面显示的是我的应用程序文件

Below shown are my application files

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来导入角形材料组件.

I have separately created app-material.module.ts to import the angular material components.

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

         }) } }}

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

when I compile and run my application I am getting the error as shown below

任何人都可以帮助我解决此问题，并为我的部门下拉列表实施get请求.

can anybody please help me to resolve this issue and implement the get request for my department dropdown.

推荐答案

这是一个简单的错误.您可能应该仔细查看代码并进行故障排除，而不是立即询问StackOverflow.您还应该缩短代码段，以便我们可以立即跟踪错误的出处.

It's a simple error. You should probably look closely at your code and troubleshoot instead of straight away asking on StackOverflow. You should also shorten your code snippets so that we can straight away trace where the error came from.

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

Anyways, the problem here is that you spelt your service wrongly. In your service file, it was spelt as AccountdetailService, but in your module file, it was imported as AccoundetailService. This causes the problem.

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语法.

---

By the way, you should rename your service to AccountDetailService since "account" and "detail" are two different words altogether and the word "detail" should start with a capital letter "D" instead. This will follow the PascalCase syntax.

这篇关于Http在angular 2中获取请求以从放置在资产中的json文件中获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！