json - วิธีแปลงค่าที่เก็บใน Observable เป็นสตริง ใน TypeScript?

สวัสดี ฉันเพิ่งเริ่มใช้งาน Angular และ TypeScript ฉันต้องการค่าของ Observable ในรูปแบบของสตริง จะทำอย่างไรได้บ้าง?

ไฟล์ BmxComponent

export class BmxComponent {
    asyncString = this.httpService.getDataBmx();
    currentStock = this.httpService.getDataBmx2(); //this is what I want to covert to a string so I can pass it to onSubmit()

    onSubmit() {
        const asnNumm = this.currentStock; // passing it here changes my database, see below
        this.httpService.sendData({ stock: asnNumm })
            .subscribe(
            data => console.log(data),
            error => console.log(error)
            );
    }
}

ไฟล์ HttpService

export class HttpService {

    constructor(private http: Http) {}

    getDataBmx() {
        return this.http.get('https://the-bicycle-shop.firebaseio.com/products/Bicycles/bmx/stock.json')
            .map((response: Response) => response.json());
    }

    getDataBmx2() {
        return (this.http.get('https://the-bicycle-shop.firebaseio.com/products/Bicycles/bmx/stock.json'));
    }   

    sendData(newStock: any) {
        const body = JSON.stringify(newStock);
        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.patch('https://the-bicycle-shop.firebaseio.com/products/Bicycles/bmx.json', body, {
            headers: headers
        })
            .map((data: Response) => data.json())
            .catch(this.handleError);
    }

    private handleError(error: any) {
        console.log(error);
        return Observable.throw(error.json());
    }
}

ไฟล์ HTML

<p>{{asyncString | async}}</p> // displays 1234 which is the correct value
<p>{{asyncString}}</p> // displays [object Object]
<p>{{currentStock}}</p> // displays [object Object]
<button class="btn btn-success" (click)="onSubmit()">Change Database</button>

ฐานข้อมูลของฉันก่อน onSubmit() (ใช้เมื่อฉันคลิกปุ่มเปลี่ยนฐานข้อมูล)

Bicycles
|
---bmx
    |
    ---stock = 1234;

ฐานข้อมูลของฉันหลังจาก onSubmit()

Bicycles
|
--- bmx
     |
     ---stock
         |
         --- _isScalar = false

ฉันกำลังใช้ Firebase สำหรับสิ่งนี้

ฉันรู้ว่ามันจะใช้ได้กับสตริงเพราะฉันทดสอบมันแบบนี้:

    onSubmit() {
        const asnNumm = "33333" //the change to test it
        this.httpService.sendData({ stock: asnNumm })
            .subscribe(
            data => console.log(data),
            error => console.log(error)
            );
    }

สิ่งนี้ทำกับฐานข้อมูลของฉัน

Bicycles
|
---bmx
    |
    ---stock = 33333

ฉันเข้าใจว่า currentStock จะเก็บค่าที่เหมือนกับค่าที่ถูกเก็บอยู่ในฐานข้อมูลของฉันในขณะนี้ ดังนั้นมันจะไม่ต่างกัน แต่ฉันต้องการเปลี่ยนมันเมื่อฉันแปลงมันเป็นสตริงแล้ว

โดยพื้นฐานแล้วฉันต้องการเปลี่ยน "stock" ในฐานข้อมูลของฉัน แต่โดยจำนวนที่กำหนดคงที่ทุกครั้งที่ฉันกดปุ่มเปลี่ยนฐานข้อมูล เช่น ลบออก 1 ทุกครั้งที่กด

คำตอบ #1

สมัครสมาชิกกับ observable เพื่อรับผลลัพธ์และเรียกใช้ onSubmit เมื่อคุณได้รับค่า:

currentStock = this.httpService.getDataBmx2()
.subscribe(val => this.onSubmit(val));

คำตอบ #2

วัตถุมีเมธอด toString ที่คุณสามารถนำไปใช้งานเพื่อแสดงค่าของวัตถุ หรือแปลงเป็นสตริงด้วย JSON.stringify() แบบนี้

this.httpService.sendData({ stock: asnNumm })
        .subscribe(
        data => console.log(JSON.stringify(data)),
        error => console.log(error)
        );

คุณต้องทำการแมปไปยังวัตถุตอบสนองเพื่อรับข้อมูล, หากต้องการรับข้อมูลเป็นข้อความคุณสามารถสอบถามวัตถุตอบสนองได้

getDataBmx2() {
    return this.http.get('https://the-bicycle-shop.firebaseio.com/products/Bicycles/bmx/stock.json')
        .map((response: Response) => response.text());
}


export class BmxComponent {
    currentStock: string;

   this.httpService.getDataBmx2().subscribe(s => this.currentStock = s); //this is what I want to covert to a string so I can pass it to onSubmit()

    onSubmit() {
        const asnNumm = this.currentStock; // passing it here changes my database, see below