Question

我创建了一个从模拟中检索数据的服务，如下所示：

    let messagesRef = fire.database().ref('vendor/'+this.state.Day+'/'+this.state.Vendor+'/dishname').orderByKey().limitToLast(100);
    messagesRef.on('child_added', snapshot => {
      /* Update React   state when message is added at Firebase Database */
      let message1 = { text: snapshot.val(), id: snapshot.key };
      this.setState({ messages: [message1].concat(this.state.messages) });
    })
  }
  addMessage(e){
    let messagesR = fire.database().ref('vendor/'+this.state.Day+'/'+this.state.Vendor+'/dishname').orderByKey().limitToLast(100);
    messagesR.on('child_added', snapshot => {
      /* Update React   state when message is added at Firebase Database */
      let message1 = { text: snapshot.val(), id: snapshot.key };
      this.setState({ messages: [message1].concat(this.state.messages) });
    })

    var newData={
    Type: this.inputE3.value,
    Dish: this.inputEl.value,
    Price : this.inputE2.value
    }

    fire.database().ref('vendor/'+this.state.Day+'/'+this.state.Vendor+'/dishname').push(newData);
    this.inputEl.value = ''; 
  this.inputE2.value = ''; 
  this.inputE3.value = ''; 

  }

该服务在

以下

export const PHOTOS: Photo[] = [
 {   
    title: "title 1",
    srcImage:"https:/34297040313_3436fd2556_k.jpg"        
  },
  { 
    title: "title 2",               
    srcImage:"https://34297040313_3436fd2556_k.jpg"                   
  }
}

在我的组件中，我按如下方式使用该服务：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Photo } from '../../model/photo';
import { PHOTOS } from './mock-photos';
import { of } from 'rxjs/observable/of';

@Injectable()
export class PhotoService {

  constructor() { }

  getPhotos(): Observable<Photo[]> {
    return of(PHOTOS);
  }    
}

我希望只显示第一个元素，而不显示所有列表。

Answer 1

PHOTOS是一个数组，因此当您执行of(PHOTOS)时，它将创建一个可观察的对象，该对象将发出该数组作为第一个值。当您使用 first 方法时，它将起作用，这意味着它将仅返回可观察对象发出的第一项，但是在这种情况下，它是一个包含所有值的数组。

如果要创建一个可观察对象，该可观察对象将从数组中的每个项目中发出单个项目，则需要使用from方法from(PHOTOS)。在这种情况下，第一个将按您的预期工作。

Answer 2

使用of(PHOTOS)时，它将获取整个数组并将其作为单个项目发出。

如果您希望getPhotos()将每个数组项作为单个发射发出，则可以使用from(PHOTOS)。

您还可以使用map仅获取第一项，也可以接受订阅中的第一项：

from(PHOTOS)
  .subscribe(photos => {
    // photos[0]
  });

from(PHOTOS)
  .pipe(
    first(),
  )
  .subscribe(photo => {
    // photo
  });

Answer 3

其他人已经注意到，流发出的元素是数组。

最简单的解决方案是再添加一个运算符：

07-03 18:23:12.950 28342-28384/in.zenify.android.internal.debug W/System.err: java.lang.RuntimeException: Unable to convert in.temp.android.internal.mediaCollection.webservice.GroupObject@5230c4a to RequestBody
07-03 18:23:12.951 28342-28384/in.temp.android.internal.debug W/System.err: at retrofit2.ParameterHandler$Body.apply(ParameterHandler.java:358)
    at retrofit2.ServiceMethod.toRequest(ServiceMethod.java:111)
    at retrofit2.OkHttpCall.createRawCall(OkHttpCall.java:184)
07-03 18:23:12.952 28342-28384/in.temp.android.internal.debug W/System.err: at retrofit2.OkHttpCall.execute(OkHttpCall.java:168)
    at retrofit2.ExecutorCallAdapterFactory$ExecutorCallbackCall.execute(ExecutorCallAdapterFactory.java:91)
    at in.internal.android.internal.mediaCollection.MediaCollectionTask$5.upload(MediaCollectionTask.java:347)
    at in.internal.android.internal.mediaCollection.MediaCollectionTask$5.upload(MediaCollectionTask.java:308)
    at in.internal.android.internal.core.sync.ZenSyncAdapter.upSync(ZenSyncAdapter.java:154)
    at in.internal.android.internal.core.sync.ZenSyncAdapter.onPerformSync(ZenSyncAdapter.java:60)
    at android.content.AbstractThreadedSyncAdapter$SyncThread.run(AbstractThreadedSyncAdapter.java:272)
07-03 18:23:12.954 28342-28384/in.internal.android.internal.debug W/System.err: Caused by: com.fasterxml.jackson.databind.JsonMappingException: HousingComplex doesn't have a primary key. (through reference chain: in.temp.android.internal.mediaCollection.webservice.GroupObject["mediaList"]->java.util.HashMap["MAIN_DOOR_1_UfffX6DZR-iljygYhvIzKA"]->java.util.ArrayList[0]->in.internal.android.internal.mediaCollection.webservice.MediaObject["mediaTagList"]->io.realm.RealmList[0]->io.realm.in_temp_android_internal_models_TagRealmProxy["realm"]->io.realm.Realm["schema"]->io.realm.ImmutableRealmSchema["all"]->java.util.LinkedHashSet[4]->io.realm.ImmutableRealmObjectSchema["primaryKey"])
07-03 18:23:12.963 28342-28384/in.temp.android.internal.debug W/System.err: at com.fasterxml.jackson.databind.ser.std.StdSerializer.wrapAndThrow(StdSerializer.java:342)
07-03 18:23:12.964 28342-28384/in.temp.android.internal.debug W/System.err: at com.fasterxml.jackson.databind.ser.std.BeanSerializerBase.serializeFields(BeanSerializerBase.java:686)
    at com.fasterxml.jackson.databind.ser.BeanSerializer.serialize(BeanSerializer.java:157)
    at com.fasterxml.jackson.databind.ser.std.CollectionSerializer.serializeContents(CollectionSerializer.java:149)
    at com.fasterxml.jackson.databind.ser.std.CollectionSerializer.serialize(CollectionSerializer.java:112)
    at com.fasterxml.jackson.databind.ser.std.CollectionSerializer.serialize(CollectionSerializer.java:25)
    at com.fasterxml.jackson.databind.ser.BeanPropertyWriter.serializeAsField(BeanPropertyWriter.java:672)
    at com.fasterxml.jackson.databind.ser.std.BeanSerializerBase.serializeFields(BeanSerializerBase.java:678)
    at com.fasterxml.jackson.databind.ser.BeanSerializer.serialize(BeanSerializer.java:157)
    at com.fasterxml.jackson.databind.ser.BeanPropertyWriter.serializeAsField(BeanPropertyWriter.java:672)
    at com.fasterxml.jackson.databind.ser.std.BeanSerializerBase.serializeFields(BeanSerializerBase.java:678)
    at com.fasterxml.jackson.databind.ser.BeanSerializer.serialize(BeanSerializer.java:157)
    at com.fasterxml.jackson.databind.ser.BeanPropertyWriter.serializeAsField(BeanPropertyWriter.java:672)
    at com.fasterxml.jackson.databind.ser.std.BeanSerializerBase.serializeFields(BeanSerializerBase.java:678)
    at com.fasterxml.jackson.databind.ser.BeanSerializer.serialize(BeanSerializer.java:157)
    at com.fasterxml.jackson.databind.ser.std.CollectionSerializer.serializeContents(CollectionSerializer.java:149)
    at com.fasterxml.jackson.databind.ser.std.CollectionSerializer.serialize(CollectionSerializer.java:112)
    at com.fasterxml.jackson.databind.ser.std.CollectionSerializer.serialize(CollectionSerializer.java:25)
    at com.fasterxml.jackson.databind.ser.BeanPropertyWriter.serializeAsField(BeanPropertyWriter.java:672)
    at com.fasterxml.jackson.databind.ser.std.BeanSerializerBase.serializeFields(BeanSerializerBase.java:678)
    at com.fasterxml.jackson.databind.ser.BeanSerializer.serialize(BeanSerializer.java:157)
    at com.fasterxml.jackson.databind.ser.impl.IndexedListSerializer.serializeContents(IndexedListSerializer.java:119)
    at com.fasterxml.jackson.databind.ser.impl.IndexedListSerializer.serialize(IndexedListSerializer.java:79)
    at com.fasterxml.jackson.databind.ser.impl.IndexedListSerializer.serialize(IndexedListSerializer.java:18)
07-03 18:23:12.965 28342-28384/in.temp.android.internal.debug W/System.err: at com.fasterxml.jackson.databind.ser.std.MapSerializer.serializeFields(MapSerializer.java:616)
    at com.fasterxml.jackson.databind.ser.std.MapSerializer.serialize(MapSerializer.java:519)
    at com.fasterxml.jackson.databind.ser.std.MapSerializer.serialize(MapSerializer.java:31)
    at com.fasterxml.jackson.databind.ser.BeanPropertyWriter.serializeAsField(BeanPropertyWriter.java:672)
    at com.fasterxml.jackson.databind.ser.std.BeanSerializerBase.serializeFields(BeanSerializerBase.java:678)
    at com.fasterxml.jackson.databind.ser.BeanSerializer.serialize(BeanSerializer.java:157)
    at com.fasterxml.jackson.databind.ser.DefaultSerializerProvider.serializeValue(DefaultSerializerProvider.java:253)
    at com.fasterxml.jackson.databind.ObjectWriter$Prefetch.serialize(ObjectWriter.java:1425)
    at com.fasterxml.jackson.databind.ObjectWriter._configAndWriteValue(ObjectWriter.java:1129)
    at com.fasterxml.jackson.databind.ObjectWriter.writeValueAsBytes(ObjectWriter.java:1025)
    at retrofit2.converter.jackson.JacksonRequestBodyConverter.convert(JacksonRequestBodyConverter.java:34)
    at retrofit2.converter.jackson.JacksonRequestBodyConverter.convert(JacksonRequestBodyConverter.java:24)
    at retrofit2.ParameterHandler$Body.apply(ParameterHandler.java:356)
    ... 9 more
Caused by: java.lang.IllegalStateException: HousingComplex doesn't have a primary key.
07-03 18:23:12.967 28342-28384/in.temp.android.internal.debug W/System.err: at io.realm.RealmObjectSchema.getPrimaryKey(RealmObjectSchema.java:377)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.fasterxml.jackson.databind.ser.BeanPropertyWriter.serializeAsField(BeanPropertyWriter.java:633)
    at com.fasterxml.jackson.databind.ser.std.BeanSerializerBase.serializeFields(BeanSerializerBase.java:678)
    ... 44 more

或者在RxJS 6中：

this.photoService
  .getPhotos()
  .flatMap(photos => photos)
  .first()
  .subscribe(response => console.log(response));

this.photoService .getPhotos() .pipe( flatMap(photos => photos), first() ) .subscribe(response => console.log(response));允许您返回数组而不先创建可观察的数组。它会分别发出数组的所有条目（就像您在一开始所期望的那样）。

Angular 6'rxjs / Rx';可观察的first（）不起作用

3 个答案: