Angular 财产'；getmobileList'；不存在于类型'；移动服务&x27；。角度4

我正在研究Angular 4

因此，我创建了一个定制服务，并将其导入

app.module.ts

我创建了一个接口

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

我犯了一个错误

D:/Personal/My Practice/MOBILEKART/src/app/mobiles/mobiles.component.ts（61,40）中出错：类型“MobileService”上不存在属性“getmobileList”

有人能告诉我发生了什么事吗

我试过了

--提前谢谢

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

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

    import {          BrowserModule        } from '@angular/platform-browser';
    import {          NgModule        } from '@angular/core';
    import {          FormsModule        } from '@angular/forms';
    import {          HttpClientModule        } from '@angular/common/http';
    import {          RouterModule        } from '@angular/router';

    import {          AppComponent        } from './app.component';
    import {          MobilesComponent        } from  ./mobiles/mobiles.component';
    import {          MobileService        } from ./mobiles/mobile_service';



    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        RouterModule.forRoot([
          ...
        ])
      ],
      providers: [MobileService],
      bootstrap: [AppComponent]
    })
    export class AppModule {}
    /*platformBrowserDynamic().bootstrapModule(AppModule);*/

mobile.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
      );
    }
  }

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

    import {          BrowserModule        } from '@angular/platform-browser';
    import {          NgModule        } from '@angular/core';
    import {          FormsModule        } from '@angular/forms';
    import {          HttpClientModule        } from '@angular/common/http';
    import {          RouterModule        } from '@angular/router';

    import {          AppComponent        } from './app.component';
    import {          MobilesComponent        } from  ./mobiles/mobiles.component';
    import {          MobileService        } from ./mobiles/mobile_service';



    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        RouterModule.forRoot([
          ...
        ])
      ],
      providers: [MobileService],
      bootstrap: [AppComponent]
    })
    export class AppModule {}
    /*platformBrowserDynamic().bootstrapModule(AppModule);*/

mobile\u服务\u 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

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

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

    import {          BrowserModule        } from '@angular/platform-browser';
    import {          NgModule        } from '@angular/core';
    import {          FormsModule        } from '@angular/forms';
    import {          HttpClientModule        } from '@angular/common/http';
    import {          RouterModule        } from '@angular/router';

    import {          AppComponent        } from './app.component';
    import {          MobilesComponent        } from  ./mobiles/mobiles.component';
    import {          MobileService        } from ./mobiles/mobile_service';



    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        RouterModule.forRoot([
          ...
        ])
      ],
      providers: [MobileService],
      bootstrap: [AppComponent]
    })
    export class AppModule {}
    /*platformBrowserDynamic().bootstrapModule(AppModule);*/

我得到了答案 在

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

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

    import {          BrowserModule        } from '@angular/platform-browser';
    import {          NgModule        } from '@angular/core';
    import {          FormsModule        } from '@angular/forms';
    import {          HttpClientModule        } from '@angular/common/http';
    import {          RouterModule        } from '@angular/router';

    import {          AppComponent        } from './app.component';
    import {          MobilesComponent        } from  ./mobiles/mobiles.component';
    import {          MobileService        } from ./mobiles/mobile_service';



    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        RouterModule.forRoot([
          ...
        ])
      ],
      providers: [MobileService],
      bootstrap: [AppComponent]
    })
    export class AppModule {}
    /*platformBrowserDynamic().bootstrapModule(AppModule);*/

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

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

请将代码移到
ngOnInit（）
外部，然后尝试调试器以查看您是否有权访问
getmobileList（）
内部组件。如果您看不到
getmobileList（）
请在调试时共享屏幕截图我保留了图像@ShashankVivek您是否能够访问
MobileService
的
mobileList
？