遇到未定义的提供商!通常这意味着您具有循环依赖关系

时间:2018-04-13 23:02:34

标签: angular autocomplete ionic2

我需要使用3个搜索栏,但每个搜索栏都指向一个特定的搜索链接。

我这样做:

HTML

 <ion-auto-complete [dataProvider]="searchTypeImmobileProvider"
                       [hideListOnSelection]="true"
                       (itemSelected)="getSearchResultImmobile($event)"
                       [options]="{ placeholder : 'placeholder.seachTypeImmobile' | translate, noItems: 'placeholder.noItemsTypeImmobile' | translate }"
                       #searchTypeImmobile></ion-auto-complete>

  <ion-auto-complete [dataProvider]="searchCitiesProvider"
                     [hideListOnSelection]="true"
                     (itemSelected)="getSearchCities($event)"
                     [options]="{ placeholder : 'placeholder.seachCities' | translate, noItems: 'placeholder.noItemsCities' | translate }"
                     #searchCities></ion-auto-complete>

  <ion-auto-complete [dataProvider]="searchCepsProvider"
                     [hideListOnSelection]="true"
                     (itemSelected)="getSearchCeps($event)"
                     [options]="{ placeholder : 'placeholder.seachDistrict' | translate, noItems: 'placeholder.noItemsDistrict' | translate }"
                     #searchDistrict></ion-auto-complete>

app.module

providers: [
    SearchCitiesProvider,
    SearchTypeImmobileProvider,
    SearchCepsProvider,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: Interceptors,
      multi: true
    },
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Toast
  ]

PROVIDER CEP

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {AutoCompleteService} from 'ionic2-auto-complete';
import 'rxjs/add/operator/map'
import {environment} from "../environments/env";


/*
  Generated class for the SearchCitiesProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class SearchCepsProvider implements AutoCompleteService {
  labelAttribute = "name";
  formValueAttribute = "";
  host = environment.api.url;

  constructor(private http: HttpClient) {
  }

  getResults(keyword: string) {
    return this.http.get(this.host + '/ceps/search/' + keyword)
      .map(
        (result: any) => {
          console.log(result)
          return result.data.filter(item => item.name.toLowerCase().startsWith(keyword.toLowerCase()))
        });
  }
}

提供者城市

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {AutoCompleteService} from 'ionic2-auto-complete';
import 'rxjs/add/operator/map'
import {environment} from "../environments/env";


/*
  Generated class for the SearchCitiesProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class SearchCitiesProvider implements AutoCompleteService {
  labelAttribute = "name";
  formValueAttribute = "";
  host = environment.api.url;

  constructor(private http: HttpClient) {
  }

  getResults(keyword: string) {
    return this.http.get(this.host + '/cities/search/' + keyword)
      .map(
        (result: any) => {
          console.log(result)
          return result.data.filter(item => item.name.toLowerCase().startsWith(keyword.toLowerCase()))
        });
  }
}

PROVIDER TYPEIMMOBILE

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {AutoCompleteService} from 'ionic2-auto-complete';
import 'rxjs/add/operator/map'
import {environment} from "../environments/env";


/*
  Generated class for the SearchCitiesProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class SearchCitiesProvider implements AutoCompleteService {
  labelAttribute = "name";
  formValueAttribute = "";
  host = environment.api.url;

  constructor(private http: HttpClient) {
  }

  getResults(keyword: string) {
    return this.http.get(this.host + '/cities/search/' + keyword)
      .map(
        (result: any) => {
          console.log(result)
          return result.data.filter(item => item.name.toLowerCase().startsWith(keyword.toLowerCase()))
        });
  }
}

这个错误出现了,我试图执行几种修正方法,但我不能,而且我不确定错误是什么。

  

未捕获错误:遇到未定义的提供程序!通常这意味着您有一个循环依赖(可能是由于使用&#39;桶&#39; index.ts文件。

0 个答案:

没有答案