面对错误core.js:15723错误TypeError:无法读取Angular 7中未定义的属性“ toLowerCase”

时间:2019-04-10 11:57:11

标签: javascript angular typescript rxjs observable

在下面我提到了我正在使用lazyLoading Module的代码。  所以请检查我的代码并纠正我。面临TypeError:无法读取Angular 7中未定义的属性“ toLowerCase”。 下面是添加模型类。我想知道我在代码中犯了什么错误,请纠正我。

模型类

export class C_data {
productId:number;
product:string;
code:string;
available:string;
price:number;
rating:number;
productImage:string;
}

allData-page.component.ts

import {C_data} from '../../shared/model/c_data';
import { AllDataService } from './allData.service';
import { Observable } from 'rxjs';
@Component({
selector: 'all-data',
templateUrl: './alldataPage.component.html'
})

export class AlldataPageComponent implements OnInit {

    cdata:Observable<C_data[]>;

    constructor(private _allDataService: AllDataService) { }

    ngOnInit() { 
        this._allDataService.getData().subscribe(data => this.cdata)
        console.log(this.cdata);
    }
}

allData.service.ts

import { HttpClient } from '@angular/common/http';
import { C_data } from 'app/shared/model/c_data';
import { Observable } from 'rxjs';

@Injectable({providedIn: 'root'})
export class AllDataService {

    urls:'../../shared/services/modeldata.json';

    constructor(private _httpClient: HttpClient) { }

    getData():Observable<C_data[]>{
        return this._httpClient.get<C_data[]>(this.urls);
    }

}

modeldata.json

    "product":"Leaf Rake",
    "code":"GDN-0011",
    "available":"Mar 19,2016",
    "price":25,
    "rating":5,
    "productImage":"http://lorempixel.com/400/200/"
},
{
      "productId":2,
    "product":"Garden Cart",
    "code":"GDN-0021",
    "available":"April 19,2016",
    "price":25,
    "rating":4,
    "productImage":"http://lorempixel.com/400/200/"
},
{
  "productId":3,
    "product":"Hammer",
    "code":"GDN-0041",
    "available":"Mar 19,2016",
    "price":25,
    "rating":3.5,
      "productImage":"http://lorempixel.com/400/200/"
},
{
     "productId":4,
    "product":"Saw",
    "code":"GDN-0011",
    "available":"Mar 19,2016",
     "price":25,
     "rating":4.1,
      "productImage":"http://lorempixel.com/400/200/"
},
{
     "productId":5,
    "product":"Video Game Controller",
    "code":"GDN-0025",
    "available":"Mar 19,2016",
    "price":25,
    "rating":4.2,
      "productImage":"http://lorempixel.com/400/200/"
}
]

alldata.module.ts

import { AlldataPageComponent } from './allData-page.component';
import { CommonModule } from '@angular/common';
import { AllDataRouterModule } from './allData-routing.module';
import {  HttpClientModule } from '@angular/common/http';

@NgModule({
    imports: [
        CommonModule,
        AllDataRouterModule,
        HttpClientModule
    ],
    exports: [],
    declarations: [AlldataPageComponent]
})
export class AllDataModule { }

allData-routing.module.ts

import { NgModule } from '@angular/core';
import { AlldataPageComponent } from './allData-page.component';

export const routes: Routes = [
    {
        path:'',
        component: AlldataPageComponent,
        data:{
            title:'data-table'
        }
    }
]

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
    declarations: [],
})
export class AllDataRouterModule { }

1 个答案:

答案 0 :(得分:2)

应该是:

urls='../../shared/services/modeldata.json';

不是

urls:'../../shared/services/modeldata.json';