typescript - จะคืนค่าจากฟังก์ชันที่มีการสมัครสมาชิก Observable อยู่ข้างในได้อย่างไร?

ฉันไม่รู้วิธีดึงค่าจาก Observable เพื่อให้ฟังก์ชันที่มี Observable นั้นส่งค่ากลับมา ฉันต้องการเพียงค่าจากมันเพื่อส่งกลับมา ไม่มีอย่างอื่น

เวอร์ชันปัจจุบันที่ใช้งานได้

function getValueFromObservable() {
    this.store.subscribe(
        (data:any) => {
            console.log(data)
        }
    )
}
getValueFromObservable()

ฉันต้องการให้สิ่งนี้ทำงาน ฟังก์ชันต้องคืนค่า แล้วก็:

function getValueFromObservable() {
    this.store.subscribe(
        (data:any) => {
            return data
        }
    )
}
console.log(getValueFromObservable())

ฉันทำอะไรผิดตรงนี้หรือ?

คำตอบ #1

แก้ไข: อัปเดตโค้ดเพื่อสะท้อนการเปลี่ยนแปลงวิธีการทำงานของ pipe ในเวอร์ชันล่าสุดของ RXJS ตัวดำเนินการทั้งหมด (ในตัวอย่างของฉันคือ take) ตอนนี้ถูกห่อหุ้มอยู่ในตัวดำเนินการ pipe() แล้ว

ฉันตระหนักว่าคำถามนี้เป็นมานานแล้วและคุณคงมีวิธีแก้ปัญหาที่เหมาะสมในตอนนี้ แต่สำหรับใครก็ตามที่กำลังค้นหาสิ่งนี้ ฉันขอแนะนำให้แก้ไขด้วย Promise เพื่อคงรูปแบบแบบอะซิงค์ไว้

เวอร์ชันที่อธิบายละเอียดมากขึ้นคือการสร้าง Promise ใหม่:

function getValueFromObservable() {
    return new Promise(resolve=>{
        this.store.pipe(
           take(1) //useful if you need the data once and don't want to manually cancel the subscription again
         )
         .subscribe(
            (data:any) => {
                console.log(data);
                resolve(data);
         })
    })
}

ด้านผู้รับคุณจะต้อง "รอ" ให้คำสัญญา (promise) ถูกแก้ไขด้วยบางอย่างเช่นนี้:

getValueFromObservable()
   .then((data:any)=>{
   //... continue with anything depending on "data" after the Promise has resolved
})

วิธีที่เรียบง่ายกว่าจะเป็นการใช้ .toPromise() ของ RxJS แทน:

function getValueFromObservable() {
    return this.store.pipe(take(1))
       .toPromise()   
}

ฝ่ายที่รับยังคงเหมือนกับด้านบนแน่นอน

คำตอบ #2

นี่ไม่ใช่แนวคิดที่ถูกต้องแน่นอนในการใช้ Observable

ในคอมโพเนนต์คุณต้องประกาศสมาชิกของคลาสซึ่งจะเก็บวัตถุ (บางสิ่งที่คุณจะใช้ในคอมโพเนนต์ของคุณ)

export class MyComponent {
  name: string = "";
}

จากนั้น Service จะส่งกลับ Observable ให้คุณ:

getValueFromObservable():Observable<string> {
    return this.store.map(res => res.json());
}

Component ควรเตรียมตัวเองให้สามารถดึงค่าจากมันได้:

OnInit(){
  this.yourServiceName.getValueFromObservable()
    .subscribe(res => this.name = res.name)
}

คุณต้องกำหนดค่าจาก Observable ให้กับตัวแปร:

และเทมเพลตของคุณจะใช้ตัวแปร name:

<div> {{ name }} </div>

อีกวิธีหนึ่งในการใช้ Observable คือผ่าน async pipe http://briantroncone.com/?p=623

หมายเหตุ: หากนี่ไม่ใช่สิ่งที่คุณกำลังถาม กรุณาอัปเดตคำถามของคุณโดยระบุรายละเอียดเพิ่มเติม