访问服务的异步变量

Question

这是我的第一个 Angular 4 项目的一部分。我目前可以从搜索栏中很好地调用 searchCall 函数，但是存储在 tweetsData 中的数据似乎不在我在 app.component.html 中调用的 *ngFor 范围内，并且作为异步后端调用 twitter api。我收到此错误：TypeError: Cannot read property 'subscribe' of undefined，所以我不能正确设置 observable。非常感谢任何帮助。

twitter.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class TwitterService {
  searchQuery: string = '';
  tweetsData;

  constructor(private http: Http) {
    console.log('TwitterService created');
    this.getBearerToken();
  }

  getBearerToken() {
    // get bearer token from twitter api
    var headers = new Headers();

    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    this.http.post('http://localhost:3000/authorize', {headers: headers}).subscribe((res) => {
      console.log(res);
    });
  }

  getTweetsData():Observable<any> {
    return this.tweetsData;
  }

  searchCall() {
    console.log('searchCall made');
    console.log(this.searchQuery);
    var headers = new Headers();
    var searchTerm = 'query=' + this.searchQuery;

    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    this.http.post('http://localhost:3000/search', searchTerm, {headers: headers}).subscribe((res) => {
      this.tweetsData = res.json().data.statuses;
    });
  }

}

app.component.ts

import { Component, OnInit, TemplateRef } from '@angular/core';
import { Http, Headers } from '@angular/http';

import { TwitterService } from './twitter.service';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ 'custom-styles/app.component.css' ],
  providers: [TwitterService]
})
export class AppComponent implements OnInit {
  searchQuery: string = '';
  tweetsData;
  expandedNewTweetBox: boolean = false;

  public modalRef: BsModalRef;

  constructor(private http: Http, private twitterService: TwitterService, private modalService: BsModalService) {}

  ngOnInit() {
    this.twitterService.getTweetsData().subscribe(
      data => this.tweetsData = data
    )
  }

  public openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}

app.component.html

...
<div *ngIf="tweetsData">
  <div *ngFor="let item of tweetsData" class="col-12">
...

navbar.component.html

<div class="input-group">
   <input type="text" class="form-control" placeholder="Search Chiller" aria-label="Search Chiller" [(ngModel)]="twitterService.searchQuery" [ngModelOptions]="{standalone: true}">
   <span class="input-group-btn">
      <button class="btn btn-secondary" type="button" (click)="twitterService.searchCall()">Go!</button>
   </span>
</div>

Answer 1

twitter.service.ts 中的 tweetsData 是什么类型

   getTweetsData():Observable<any> 
    {
    return this.tweetsData;
    } 

这个函数是否返回一个 observable ？ 如果这不是 observable ，则可以返回 Observable.of(this.tweetsData)

 getTweetsData():Observable<any> {
    return Observable.of(this.tweetsData) ;
    }

Answer 2

第一个问题，就像在 cmets 中指出的那样，将您的 providers 数组放在组件级别意味着您有单独的服务实例，因此它根本不共享。所以删除那些！

你也有竞争条件，就像 cmets 中提到的那样。

我了解您希望订阅者在tweetsData 具有值时收听。您需要做的是为这些订阅者提供 observables 您现在正在做什么：

getTweetsData():Observable<any> {
  return this.tweetsData;
}

返回一个数组（假设），而不是一个数组的可观察对象。您不能订阅“常规”数组。

所以我要做的就是在服务中声明一个 Observable：

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

// don't use 'any', type your data instead
// you can also use a 'Subject' if the subscribers are always listening
private tweetsData = new BehaviorSubject<any>(null);
public tweetsData$ = this.tweetsData.asObservable();

然后，当您获取数据时，请致电next()：

searchCall() {
  // ....
  this.http.post(...)
    .subscribe((res) => {
      this.tweetsData.next(res.json().data.statuses)
    });
}

然后你让你的订阅者收听这个 observable，比如：

constructor(private twitterService: TwitterService) {
  twitterService.tweetsData$
    .subscribe(data => {
       this.tweetsData = data;
    });
}

应该这样做。进一步阅读文档：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service