Angular4 Observable to Array

Question

我需要從Observable對象中獲取一些數據，以便在SEO中使用（更改元標題&& description）。

我通過HTTP從API獲取數據。 數據在Observable對象中獲得。

我通過訂閱this.radio $以某種方式成功轉換Observable對象，但這會導致函數getRadioData（slug：string）的雙重請求。

可能我需要將Observable對象轉換為Array。

radio-details.component.ts （這里我想獲得SEO的meta_title && meta_description變量）

 import { Component, OnInit } from '@angular/core'; import { RadioDetails, RadioService } from './../services/radio.service'; import { Router, ActivatedRoute, ParamMap } from '@angular/router'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'app-radio-details', templateUrl: './radio-details.component.html', styleUrls: ['./radio-details.component.css'], providers: [RadioService] }) export class RadioDetailsComponent implements OnInit { radio$: Observable<RadioDetails[]>; constructor( private route: ActivatedRoute, private router: Router, private service: RadioService ) { } ngOnInit() { this.route.paramMap .switchMap((params: ParamMap) => this.service.getRadioData(params.get('slug')) ) .subscribe( (data) => { this.radio$ = data; console.log("this.radio$ IS: ", this.radio$) // HERE I WANT TO get meta_title && meta_description variables for SEO // this.radio$ looks like: Object { _isScalar: false, source: Object, operator: Object } } ); } } 

radio.service.ts

 import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; export class Categories{ constructor( public title: string, public items: Radio[] ){} } export class Radio{ constructor( public title: string, public slug: string, public external_url?: string, public isplay?: string, public css_class?: string ){} } export class RadioDetails{ constructor( public title: string, public player_type?: string, public stream?: string, public meta_title?: string, public meta_description?: string ){} } @Injectable() export class RadioService { constructor(private _http: Http) { } getAllRadiosData(){ return this._http.get('http://api.2net.co.il/radio/stations/all_stations.php') .map(res => res.json()) } getRadioData(slug: string){ if (slug !== null && typeof slug !== 'undefined' && slug){ return [ this._http.get('http://api.2net.co.il/radio/stations/station.php?slug='+slug) .map(res => res.json()) ]; } } } 

無線電details.component.html

 <article class="page page-radio-detail"> <div *ngIf="radio$ | async as radio; else noRadioFound"> <div class="playerZone"> <header class="entry-header"> <h1 class="entry-title"> <span class="text"> Playing now: </span> <span class="radio_title">{{ radio.title }}</span> </h1> </header> <div class="player-wrapper"> <app-radio-player stream="{{radio.stream}}" player_type="{{radio.player_type}}"></app-radio-player> </div> </div> </div><!-- /ngIf --> <ng-template #noRadioFound> <div class="playerZone noRadioFound"> <header class="entry-header"> <h1 class="entry-title"> <span class="text"> Select radio station: </span> </h1> </header> <div class="player-wrapper"> click on links below: </div> </div> </ng-template> <div class="entry-content"> <app-radio-categories></app-radio-categories> </div> </article> 

Answer 1

在你們幫助我之后，解決方案是：

1.在radio.service.ts中，不需要在函數getRadioData（slug：string）中返回Array。 正確的功能代碼必須是：

 getRadioData(slug: string){ if (slug !== null && typeof slug !== 'undefined' && slug){ return this._http.get('http://api.2net.co.il/radio/stations/station.php?slug='+slug) .map(res => res.json()); } } 

2. radio-details.component.html中radio $的實現必須沒有管道（|）。 正確的部分代碼必須是：

 <div *ngIf="radio$ as radio; else noRadioFound"> ... </div> 

3. 畢竟在radio-details.component.ts中我得到了簡單易讀的對象，如{mate_description: "some meta description", meta_title: "some_meta_title", stream: "http://example.com"}

 ngOnInit() { this.route.paramMap .switchMap((params: ParamMap) => this.service.getRadioData(params.get('slug')) ) .subscribe( (data) => { this.radio$ = data; console.log("this.radio$ IS: ", this.radio$) // this.radio$ - is a readable Object } ); }