Question

我正在尝试在服务中订阅一个功能，但出现错误 “属性'subscribe'在'void'类型上不存在” 我使用普通主题在这里订阅值虽然我在服务文件中发出值以下是我在服务文件中订阅该功能的代码

component.ts文件

import { Subscription } from 'rxjs';


export class AllproductsComponent implements OnInit {



category
filter
allprodcuts

constructor(private prservice:ProductService,private 
router:Router,private route:ActivatedRoute) { }


subscription:Subscription
ngOnInit() {

this.route.queryParams.subscribe(params=>{
  console.log(params)
  this.category=params
})


this.subscription=this.prservice.getallproductsinallprodcuts()
.subscribe(       //Here i am facing the error
  (r)=>{
    this.allprodcuts=r
    console.log(r)
  }
)



}


}

服务文件

 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { Product } from '../products.modal';
 @Injectable({
 providedIn: 'root'
 })
 export class ProductService {
 productslist=new BehaviorSubject<any>(1)
 getalllist=new Subject<any>()
 cards:any[]=[
 {
  id: 0,
  imageurl: "https://butterwithasideofbread.com/wp- 
 content/uploads/2012/07/Easiest-Best-Homemade- 
 Bread.BSB_.IMG_6014.jpg"
  ,price: "4"
  ,select: "Dairy"
  ,title: "Bread"
 },
 {
  id: 1
  ,imageurl: "https://butterwithasideofbread.com/wp- 
  content/uploads/2012/07/Easiest-Best-Homemade- 
  Bread.BSB_.IMG_6014.jpg"
  ,price: "23"
  , select: "Bread"
  ,title: "udemy"
  }

  ]
  constructor() {     
   }

 addtocards(values){
 values.id=this.cards.length
 this.cards.push(values)
 this.productslist.next(this.cards.slice())
// console.log(this.cards)
 }
getallproducts(){
return this.cards
 }

getproductbyid(id){
return this.cards[id]
 }

 update(valuestobeupdated,id){
 this.cards[id]=valuestobeupdated
this.cards[id].id=id


this.productslist.next(this.cards.slice())
}
getallproductsinallprodcuts(){
this.productslist.next(this.cards.slice())
}



}

Answer 1

如果您查看Angular docs并查看“英雄”示例。

这是在服务层中。注意，它正在返回可观察到的英雄列表。

import { Observable, of } from 'rxjs';

getHeroes(): Observable<Hero[]> {
  return of(HEROES);
}

记住他们最初有这个...

import { HEROES } from './mock-heroes';

解决了这个问题

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

您稍后可以通过适当的HTTP Web服务调用轻松地替换此模拟服务。通常，您会返回类似这样的内容，可以再次将其换出以返回可观察到的模型列表，例如Heroes []。

private heroesUrl = 'api/heroes';

...

getHeroes (): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
}

在组件级别（支持HTML组件（可以是整个页面或带有GUI的自定义组件，用于表示内容）。

getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
}

您应该执行相同的操作，订阅组件而不是服务，并使用方法签名返回您所选择的域模型列表的Observable。

通常，您会发现它也是如此描述的，这不太含糊：

getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe( (heroes:Heroes[]) =>  {
         this.heroes = heroes
       });
}

这使订阅中的英雄类型更有意义。它与从服务中返回的内容结合在一起。

如果有帮助，请务必接受答案。

通过有角度的服务订阅

1 个答案: