Question

我正在创建一个自定义observable来更新按钮单击时的图像URL。触发图像更改的按钮和要更改的元素位于不同的组件中。

我正在使用服务更新单击了哪个按钮以及要显示的图像。我正在使用Observable在单击其中一个按钮时更新图像。我对于observables是全新的，我试图理解为什么我的Observable每次都运行错误函数？我的Observable运行next（）函数但总是运行error（）并且永远不会再运行。我有什么遗失的吗？

data.service.ts：

`import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';


 @Injectable()
 export class DataServiceService {
   navOptions = []
   main_description = ""
   music_description = ""
   social_description = ""
   imgArr = [
      "https://images.pexels.com/photos/748838/pexels-photo-
      748838.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
      "https://a.vsstatic.com/mobile/app/concerts/chance-the-
      rapper.jpg",
       "https://encrypted-tbn0.gstatic.com/images?
      q=tbn:ANd9GcQoS3rbeRhL2cok8--
      b4l4BPT0k62Z5_pt55_01ogS9iNXgt3pD",
      "https://a.vsstatic.com/mobile/app/concerts/chance-the-
      rapper.jpg"
   ]
   currentImg = this.imgArr[0]
   bannerImg: Observable<any>;

   constructor() { }



   getBannerImg(): Observable<any>{
      return Observable.create((observer)=>{
         observer.next(this.currentImg)
         observer.error('error'), //always runs
         observer.complete()   

       });


   }


 }

和index.component.ts：

import { Component, OnInit } from '@angular/core';
import { DataServiceService } from '../data-service.service';
import { trigger, state, style, animate, transition } from 
'@angular/animations';


@Component({
 selector: 'app-index',
 templateUrl: './index.component.html',
 styleUrls: ['./index.component.css'],
 animations: [
   trigger('bannerState',[
     state('expanded', style({
       height: "700px",
     })),
     state('collapsed', style({
       height: "300px",
     })),
     transition( 'expanded <=> collapsed', animate('100ms ease-out'))
   ])

 ]
  })
 export class IndexComponent implements OnInit {
 navState = {
   bannerState: "expanded"
 }

 navOptions = [
   {
     title: "SHOWS",
     link: "/shows"
   },
   {
     title: "MUSIC",
     link: "/play"
   },
   {
     title: "CONTACT",
     link: "/contact"
   },
   {
     title: "SOCIAL",
     link: "/about"
   },
 ]

 currentImg;

 main_description = "The time has come | Enjoy the musical stylings 
 of Ray Ward JR"
 music_description = "Explore Music"
 social_description = "Get Affiliated"

 constructor(private dataservice: DataServiceService) { }

 ngOnInit() {
   this.retrieveData()
   this.passDataToService()
 }

 passDataToService(){
   this.dataservice.navOptions = this.navOptions;
   this.dataservice.main_description = this.main_description;
   this.dataservice.music_description = this.music_description;
   this.dataservice.social_description = this.social_description;
 }

 retrieveData(){
   this.currentImg = this.dataservice.currentImg;

   this.dataservice.getBannerImg().subscribe(
     (x) => {console.log('on next %s', x)}, //runs only first time
     (e) => {console.log('onError : ', e)}, //always runs
     ()=>{}

   );
 }
}

Answer 1

如果我理解正确，你想做的是只对从getBannerImg收到的观察者订阅一次，并在每次改变时获得该观察值的新值。如果是这样，您应该使用behaviorSubject而不是Observable。

说，我会尝试解释代码中当前发生的事情：

您的getBannerImg函数会创建一个Observable，对于每个订阅执行以下操作，一个接着一个：

1）使用值this.currentImg

调用提供的观察者的下一个函数

2）使用值error

调用提供的观察者的错误函数

3）如果之前没有为此订阅调用错误，则调用所提供的观察者的完整函数，不带任何值。由于我们在第3步中遇到错误，因此此代码将不执行任何操作。

然后，在retrieveData中，您正在使用观察者

订阅观察者

 (x) => {console.log('on next %s', x)}, //runs only first time
 (e) => {console.log('onError : ', e)}, //always runs
 ()=>{}

因此，对于此订阅，您将看到以下两行：

on next https://images.pexels.com/...
onError :  error

您没有提供HTML代码，但是如果按钮单击触发retrieveData功能，您将看到与每个订阅的输出相同的2行（除非您在订阅和更改之间更改currentImg然后第一行的值将会改变。）

Angular 4 Observable始终运行错误

1 个答案: