我是角框架和离子的初学者。
我创建了一个项目的药店使用离子4和角。。。
但是当我尝试添加药房时，我在函数onCreatePharmaG:中遇到了一个错误
类型"void"上不存在属性"subscribe"！！
我不明白为什么？？
那么我能做什么呢？
这是我的代码：
制药服务.ts
import { Injectable } from '@angular/core';
import { Pharmacie } from './pharmacie.model';
import { AuthService } from '../auth/auth.service';
import { BehaviorSubject, of } from 'rxjs';
import { take, map, tap, delay, switchMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
interface PharmacyData{
DateFin: string;
dateDeb: string;
adresse: string;
imageUrl: string;
telephone: number;
nom: string;
userId: string;
}
@Injectable({
providedIn: 'root'
})
export class PharmaciesService {
private _pharmacies = new BehaviorSubject<Pharmacie[]>([]) ;
get pharmacies(){
return this._pharmacies.asObservable();
}
constructor(private authService: AuthService,
private http: HttpClient
) { }
fetchPharmacies(){
return this.http.get<{[key: string]: PharmacyData}>('https://pharmacies.firebaseio.com/pharmacies.json').pipe(map(resData => {
const pharmacies = [];
for(const key in resData){
if(resData.hasOwnProperty(key)){
pharmacies.push(new Pharmacie(key,
resData[key].nom,
resData[key].adresse,
resData[key].imageUrl,
resData[key].telephone,
new Date(resData[key].dateDeb),
new Date(resData[key].DateFin),
resData[key].userId));
}
}
return pharmacies;
// return [];
}),
tap(pharmacies => {
this._pharmacies.next(pharmacies);
})
);
}
getPharmacy(id: string){
return this.http.get<PharmacyData>(`https://pharmacies.firebaseio.com/pharmacies/${id}.json`
).pipe(map(pharmacyData => {
return new Pharmacie(id,
pharmacyData.nom,
pharmacyData.adresse,
pharmacyData.imageUrl,
pharmacyData.telephone,
new Date(pharmacyData.dateDeb),
new Date(pharmacyData.DateFin),
pharmacyData.userId);
}));
}
AddPharmacyy(
nom: string,
adresse: string,
telephone: number,
dateDeb: Date,
DateFin: Date){
let generatedId: string;
let newPharmacy: Pharmacie;
this.authService.userId.pipe(take(1), switchMap(userId => {
if(!userId){
throw new Error('id non trouvé !');
}
newPharmacy = new Pharmacie(
Math.random().toString(),
nom,
adresse,
'https://cdn.1min30.com/wp-content/uploads/2018/05/Logo-Pharmacie-500x263.jpg',
telephone,
dateDeb,
DateFin,
userId
);
return this.http.post<{name: string}>('https://pharmacies.firebaseio.com/pharmacies.json', {...newPharmacy, id: null});
}),
switchMap(resData => {
generatedId = resData.name;
return this.pharmacies;
}),
take(1),
tap(pharmacies => {
newPharmacy.id = generatedId;
this._pharmacies.next(pharmacies.concat(newPharmacy));
})
);
}
updatePharmacy(
pharmacieId: string,
nom: string,
adresse: string,
telephone: number,
dateDeb: string,
DateFin: string
){
let updatedPharmacies: Pharmacie[];
return this.pharmacies.pipe(
take(1),
switchMap(pharmacies => {
if(!pharmacies || pharmacies.length <= 0){
return this.fetchPharmacies;
}else{
return of(pharmacies);
}
}),
switchMap(pharmacies => {
const updatedPharmacyIndex = pharmacies.findIndex(ph => ph.id === pharmacieId);
const updatedPharmacies = [...pharmacies];
const oldPharma = updatedPharmacies[updatedPharmacyIndex];
updatedPharmacies[updatedPharmacyIndex] = new Pharmacie(oldPharma.id, nom, adresse, oldPharma.imageUrl, telephone, oldPharma.dateDeb, oldPharma.DateFin, oldPharma.userId);
return this.http.put(
`https://pharmacies.firebaseio.com/pharmacies/${pharmacieId}.json`,
{ ...updatedPharmacies[updatedPharmacyIndex], id: null}
);
}),
tap(() =>{
this._pharmacies.next(updatedPharmacies);
}));
}
cancelPharmacy(pharmacieId: string){
return this.http.delete(`https://pharmacies.firebaseio.com/pharmacies/${pharmacieId}.json`).pipe(
switchMap(() => {
return this.pharmacies;
}),
take(1),
tap(pharmacies => {
this._pharmacies.next(pharmacies.filter(pha => pha.id !== pharmacieId));
})
);
}
}
添加-haramcie.page.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { PharmaciesService } from '../../pharmacies.service';
import { Router } from '@angular/router';
import { LoadingController } from '@ionic/angular';
@Component({
selector: 'app-ajouter-pharmacie',
templateUrl: './ajouter-pharmacie.page.html',
styleUrls: ['./ajouter-pharmacie.page.scss'],
})
export class AjouterPharmaciePage implements OnInit {
form: FormGroup;
constructor(
private pharmaciesService: PharmaciesService,
private router: Router,
private loadingCtrl: LoadingController
) { }
ngOnInit() {
this.form = new FormGroup({
nomPha: new FormControl(null, {
updateOn: 'blur',
validators: [Validators.required]
}),
AdrPha: new FormControl(null, {
updateOn: 'blur',
validators: [Validators.required, Validators.maxLength(180)]
}),
numPharmacie: new FormControl(null, {
updateOn: 'blur',
validators: [Validators.required, Validators.min(1)]
}),
dateDebut: new FormControl(null, {
updateOn: 'blur',
//validators: [Validators.required]
}),
dateFin: new FormControl(null, {
updateOn: 'blur',
// validators: [Validators.required]
})
});
}
onCreatePharmaG(){
if(!this.form.valid){
return;
}
this.loadingCtrl.create({
message: 'Création d'une pharmacie...'
}).then( loadingEl => {
loadingEl.present();
this.pharmaciesService.AddPharmacyy(
this.form.value.nomPha,
this.form.value.AdrPha,
+this.form.value.numPharmacie,
new Date(this.form.value.dateDebut),
new Date(this.form.value.dateFin)
).subscribe(() => {
loadingEl.dismiss();
this.form.reset();
this.router.navigate(['/pharmacies/syndicat']);
});
});
}
}
辛迪加.页.ts
import { Component, OnInit } from '@angular/core';
import { Pharmacie } from '../pharmacie.model';
import { PharmaciesService } from '../pharmacies.service';
import { IonItemSliding, LoadingController } from '@ionic/angular';
import { Subscription } from 'rxjs';
import { Router } from '@angular/router';
@Component({
selector: 'app-syndicat',
templateUrl: './syndicat.page.html',
styleUrls: ['./syndicat.page.scss'],
})
export class SyndicatPage implements OnInit {
pharmacies: Pharmacie[];
isLoading = false;
// listedLoadedPharmacies: Pharmacie[];
private pharmaciesSub: Subscription;
constructor(private pharmaciesService: PharmaciesService,
private router: Router,
private loadingCtrl: LoadingController) { }
ngOnInit() {
this.pharmaciesSub= this.pharmaciesService.pharmacies.subscribe(pharmacies =>{
this.pharmacies = pharmacies;
// this.listedLoadedPharmacies = this.loadedPharmacies.slice(1);
});
}
ionViewWillEnter(){
this.isLoading = true;
this.pharmaciesService.fetchPharmacies().subscribe(() => {
this.isLoading = false;
});
}
onCancelPharmacy(pharmacieId: string, slidingEl: IonItemSliding){
slidingEl.close();
this.loadingCtrl.create({message: 'Suppression...'}).then(loadingEl => {
loadingEl.present();
this.pharmaciesService.cancelPharmacy(pharmacieId).subscribe(() => {
loadingEl.dismiss();
});
});
}
onEdit(pharmacieId: string, slidingItem: IonItemSliding){
slidingItem.close();
this.router.navigate(['/', 'pharmacies', 'liste-pharmacies', 'modifier', pharmacieId ]);
// console.log('Editing item', pharmacieId);
}
ngOnDestroy(){
if(this.pharmaciesSub){
this.pharmaciesSub.unsubscribe();
}
}
}
如果您尝试订阅undefined值，则错误是正确的。
具体来说，AddPharmacyy方法的返回类型为void，因为它没有返回语句。
你需要把return放在this.authService.userId.pipe前面
像这样的错误可能会出现在你的代码的更多部分，所以一定要检查它。我还建议遵循最佳实践指南，并在你的应用程序中添加一个linter来消除这些错误。