'MobileService'类型中不存在属性'getmobileList'。 Angular 4

Question

我正在研究Angular 4。

因此创建了一个自定义服务，我导入<asp:ValidationSummary id="Errors" ShowMessageBox="true" runat="server" ValidationGroup="Email" /> 的提供程序 我创建了一个界面

当我尝试从该服务中检索数据时

我收到错误

  

D：/ Personal / My Practice / MOBILEKART / src / app / mobiles / mobiles.component.ts（61,40）中的错误：'MobileService'类型中不存在属性'getmobileList'。

任何人都可以告知发生了什么......

我试过to Keep public for my properties as suggested in this link

- 提前致谢。

app.module.ts

mobile Component.ts

import { Component, OnInit } from '@angular/core'; import { mobile } from './mobile'; import { MobileService } from './mobile_service'; @Component({ selector: 'app-mobiles', templateUrl: './mobiles.component.html', styleUrls: ['./mobiles.component.css'] }) export class MobilesComponent implements OnInit { title = 'MOBILE CART'; image = 'assets/images/'; click = false; showImages = true; refineMobile = ' '; shop = 'assets/images/Cart.jpg'; errorMessage: string; mobiles: mobile[] = []; // filter by name filterMobiles: mobile[]; _listFilter: string; // constructor constructor(private _mobileservice: MobileService) { this.filterMobiles = this.mobiles; this.listFilter = ''; } displayImages(): void { this.showImages == true ? (this.showImages = false) : (this.showImages = true); } ngOnInit(): void { console.log('oninit of angular is initialised'); // retrieving product with custom service.. this.mobiles = this._mobileservice.getmobileList(); this.filterMobiles = this.mobiles; get listFilter() { return this._listFilter; } set listFilter(value) { this._listFilter = value; this.filterMobiles = this.listFilter ? this.performFilter(this.listFilter) : this.mobiles; } performFilter(filterBy: string): mobile[] { filterBy = filterBy.toLocaleLowerCase(); return this.mobiles.filter( (mobile: mobile) => mobile.mobile_name.toLocaleLowerCase().indexOf(filterBy) !== -1 ); } }

mobile.ts

export interface mobile { imageUrl: string; mobile_name: string; mobile_price: number; mobile_code: string; release_date: string; rating: number; }

mobile_service_ts

import { mobile } from './mobile'; import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/throw'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/do'; @Injectable() export class MobileService { mobileList: mobile[]; constructor() {} // retriving product with custom service.. getmobileList(): mobile[] { this.mobileList = [{ //imageUrl: 'assets/download.jpg', imageUrl: 'download.jpg', mobile_name: 'Lenovo', mobile_price: 10000, mobile_code: 'K3', release_date: 'mar 19,2016', rating: 4 }, { //imageUrl: 'assets/download (1).jpg', imageUrl: 'download (1).jpg', mobile_name: 'samsung', mobile_price: 7000, mobile_code: 'ON-5', release_date: 'nov 18,2017', rating: 3 }, { // imageUrl: "assets/nokia.jpeg" imageUrl: 'nokia.jpeg', mobile_name: 'Nokia', mobile_price: 15000, mobile_code: '7', release_date: 'oct 24, 2017', rating: 4, }, { // imageUrl: "assets/iphone.jpeg" imageUrl: "iphone.jpeg", mobile_name: 'Iphone', mobile_price: 70000, mobile_code: '7s', release_date: 'oct 13 2016', rating: 3.5, } ]; return this.mobileList; } }

app.module.ts

Answer 1

我得到了答案 在mobile Component.ts

我在上面的代码中添加了接口而不是Service .. 所以我用构造函数中的服务替换它

constructor(private _mobileservice: MobileService) {
  this.filterMobiles = this.mobiles;
  this.listFilter = '';
}