我正在尝试创建一个 Angular 应用程序,并尝试在组件中使用服务,
我的服务:DetailsTabAPIService
@Injectable()
export class DetailsTabAPiService {
constructor(private _http: Http) { }
private _url: string = AppSettings.URI + "/api/maintenance/Countries";
fetchCountry(): Observable<ICountries> {
console.log('contry 3');
return this._http.get(this._url)
.map((resp: Response) => resp.json())
.catch(this.handleErrors);
}
handleErrors(error: any, caught: Observable<any[]>): Observable<ICountries[]> {
console.error(error);
return Observable.throw(error.json().error || 'Server error') as Observable<ICountries[]>;
}
}
我的 Controller :DetailTabsComponent
import { MaintPlantApiService } from '../../services/plants-api.service';
import { MaintProgramApiService } from '../../services/programs-api.service';
import { DetailsTabAPiService } from '../../services/detailstab-api.service';
import { IPlants } from '../../models/plants.model';
import { ICountries } from '../../models/Countries.model';
@Component({
selector: 'ppa-detailtabs',
templateUrl: './detailtabs.Component.html',
providers: [MaintProgramApiService, MaintPlantApiService, DetailsTabAPiService],
styleUrls: ['./tabs.css'],
})
export class DetailTabsComponent {
@Input() myplantid: number = 0;
plant: IPlants;
country: ICountries;
isSuccess: boolean = false;
_plantId: number = 0;
public allowCustom: boolean = true;
public allCountries = [];
constructor(private zone: NgZone, private _router: Router, private DetailsApiServ: DetailsTabAPiService, private ProgramsApiSvrc: MaintProgramApiService,
private plantApiSrv: MaintPlantApiService, private activatedRoute: ActivatedRoute) {
}
ngOnInit() {
console.log('contry 1');
this.fetchCountryList();
this.activatedRoute.params.subscribe((params: Params) => {
//alert('params received: ' + params['Id']);
let plantId = params['Id'];
this.plantApiSrv.getDataById(plantId)
.subscribe((callbackData) => {
this.plant = callbackData;
});
});
}
ModifyPlantDetails(_data: IPlants): void {
this.plantApiSrv.update(_data.Id, _data)
//.subscribe(result => this.plant = result, error => this.isSuccess = false);
.subscribe(result => {
this.plant = result; this.isSuccess = true;
},
error => { this.isSuccess = false });
}
fetchCountryList(): void {
console.log('contry 2');
this.DetailsApiServ.fetchCountry()
.subscribe(result => {
this.country = result;
console.log(this.country);
},
error => { this.isSuccess = false });
}
}
As per the documentation, I am supped to put the service on the provider list, which I have done, but still while using it gives me the error.
我应该从服务中获取国家列表。所以我导入了服务,然后放入构造函数,然后尝试使用它。
But despite doing everything according to the documentation, it's giving me the error "no Provider for Service" even though I am included the service in my providers.
根据我的理解,这些应该是让这个东西工作的步骤。但不知何故它不起作用。请帮忙。我确定我在这里遗漏了一些东西。但我不确定是什么。
最佳答案
- 确保添加所有需要的导入 - 通常,IDE 会自动处理它。
- 仔细检查服务的所有路径 - 如果 IDE 没有自动完成,请注意点。
- 尝试将您的服务推送到
app.module.ts
而不是将其添加到组件提供程序,就在这里:providers: [AddYourServicesHere]
。
关于Angular 4 没有服务提供者,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45912743/