Angular4 可观察到数组答案

【问题标题】：Angular4 Observable to ArrayAngular4 可观察到数组
【发布时间】：2017-10-04 08:14:13
【问题描述】：

我需要从 Observable 对象中获取一些数据以用于 SEO（更改元标题 && 描述）。

我通过 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())
  ];
}
  }
}

radio-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>

【问题讨论】：

this.radio$ 看起来怎么样？
我的意思是json数据
this.radio$: Object { _isScalar: false, source: Object, operator: Object }
你为什么要从getRadioData返回一个数组
AFAIK，要使用async 管道，您必须返回Observable，无需返回数组

标签： angular observable

【解决方案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>

毕竟在 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
      }
    );   
  }

【讨论】：