Question

嗨，我是Angular的新手，这是我正在做的第一个项目。

所以，我的问题是我将数据存储在Cloud Firestore中，然后从那里获取数据。因此，当我开始尝试从Cloud Firestore访问数据（数据已经存在于数据库中）时，我收到了这个错误

无法读取未定义的属性“ subscribe” 在AdminProductsComponent.push ../ src / app / admin / admin-products / admin-products.component.ts.AdminProductsComponent.onclickfetch

但是如果一开始我首先将至少一个数据添加到Cloud Firestore中，然后如果我从那里获取数据，我就不会收到此错误

下面是代码。

html组件

<button type="button" mdbBtn color="primary" (click)="onclickfetch()" mdbWavesEffect>Fetch Products</button>

服务文件

import { Injectable } from '@angular/core';
import 
{AngularFirestoreDocument,AngularFirestore,AngularFirestoreCollection} 
from 'angularfire2/firestore';

import { Observable } from 'rxjs';
import { Item } from '../items';
import {map} from 'rxjs/operators';

@Injectable({
providedIn: 'root'
})
export class ItemsService {
private itemscollection:AngularFirestoreCollection<any[]>
datacollection:AngularFirestoreCollection<any[]>
items:Observable<any[]>
alldata:Observable<any[]>
constructor(public afs:AngularFirestore,db:AngularFirestore) {  }

getitems(){
this.itemscollection=this.afs.collection<any[]>('categories')

return  this.items=this.itemscollection.snapshotChanges().pipe(
map(actions=>actions.map(a=>{
  const data=a.payload.doc.data() ;
  const id = a.payload.doc.id;

   return { id, ...data };
  }))
 )

}


adddata(data){
this.datacollection=this.afs.collection<any[]>('data')

this.datacollection.add(data)
 this.alldata=this.datacollection.snapshotChanges().pipe(
 map(actions=>actions.map(a=>{
 const alldata=a.payload.doc.data() ;
 const idofdata = a.payload.doc.id;
 return { idofdata, ...alldata };
 }))
 )

 }
 getdata(){
 return this.alldata
}

}

管理员新组件

//在这里，我正在获取我的Cloud Firestore中的类别 Firestore中的数据的屏幕截图

https://ibb.co/nfF1pVv

export class AdminNewComponent implements OnInit {
@ViewChild('f') form:NgForm
categories
default="Bread"

constructor(public iservice:ItemsService,private 
prservice:ProductsService,private router:Router,private 
route:ActivatedRoute) { }

ngOnInit() {
this.iservice.getitems().subscribe(items=>{
this.categories=items
console.log(this.categories)
})
}
onsubmit(f){

if(this.form.valid){
this.iservice.adddata(f)
}
this.router.navigate(['admin/products'])

}}

管理产品

///如果我尝试从Firestore中获取数据，则会出现错误
（即使数据已经存在）也无需添加一个新数据 Firestore中数据的屏幕截图

https://ibb.co/dr62vqT

export class AdminProductsComponent implements OnInit {
subscription:Subscription
categories:any[]=[]
default="Bread"
alldata
constructor(public iservice:ItemsService,private 
prservice:ProductsService,private router:Router,private 
route:ActivatedRoute) { }

ngOnInit() {
this.subscription=this.prservice.fetchproducts.subscribe(
(data)=>{
this.categories=data
} 
)
this.subscription.unsubscribe()
}

onclick(el){
this.prservice.editchanged.next(el)
this.router.navigate(['admin/products/edit'])

}

onclickfetch(){
console.log('sfshf')
this.iservice.getdata().subscribe(data=>{
this.alldata=data
console.log(this.alldata)
})

}

}

Answer 1

使它像这样简单：在您的Service.ts文件中：

getData() {
return this.afs.collection('categories').snapshotChanges();

}

在您的Component.ts文件中：

Get(){


 this.service.getData().pipe(map(list => list.map(item => {
  let data = item.payload.doc.data();
  let id = item.payload.doc.id;
  return { id, ...data }
}))).subscribe(res => {
  console.log(res);
 this.search=res;})}

在您的component.html文件中：

<button (click)="Get() > Get Data From Firestore</button>

在html中填充数据：

<ul *ngFor="let i of search>
   <li>{{i}}</li>
   </ul>

Answer 2

同意穆罕默德·阿卜杜拉（Muhammad Abdullah），您甚至可以像这样将映射保留到服务的方法中：

getData() {
   return this.afs.collection('categories').snapshotChanges()
   .pipe(map(list => list.map(item => {
       let data = item.payload.doc.data();
       let id = item.payload.doc.id;
       return { id, ...data }
   })));
}

然后在您的组件上像这样订阅：

此：

this.iservice.getdata().subscribe(data=>{
   this.alldata=data
   console.log(this.alldata)
});

无法读取AdminProductsComponent.onclickfetch（）上未定义的属性“ subscribe”

2 个答案: