Question

首先，我是Angular2 Rxjs（以及一般的观察者）和ES6 / ES2015的新手，所以这个问题可能是其中任何一个的结果。

我在Angular 2中有一个Service，它创建了一个商店，同时具有loadAll和load单一功能以及一个暴露的getter。它目前连接到虚拟数据但最终将是一个http请求（在下面注释掉）

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

export interface Article {
  id: number;
  title: string;
  content: string;
  author: string;
}

@Injectable()
export class ArticleService {
  private _articles$: Subject<Article[]>;
  private baseUrl: string;
  private dataStore: {
    articles: Article[]
  };

  private dummyData = [
      {
        id: 1,
        title: 'Title 1',
        content: 'content 1',
        author: 'author 1'
      },
      {
        id:2,
        title: 'Title 2',
        content: 'content 2',
        author: 'author 1'
      }
    ];

  constructor(private http: Http) {
    this.baseUrl = 'http://localhost:3000'
    this.dataStore = { articles: [] };
    this._articles$ = <Subject<Article[]>>new Subject();
  }
  get articles$(){
    return this._articles$.asObservable();
  }

  loadAll(){
    //Observable.fromPromise(Promise.resolve(this.dummyData))
    this.http.get(`${this.baseUrl}/articles`)
      // map for actual http requests
    .map(response => response.json())
    .subscribe(data => {
      //debugger;
      this.dataStore.articles = data;
       // Push a new copy of our article list to all Subscribers.
      this._articles$.next(this.dataStore.articles)
    }, error => console.log('Could not load Articles'));
  }

  load(id: any) {
    Observable.fromPromise(Promise.resolve(this.dummyData[id-1]))
    //this.http.get(`${this.baseUrl}/articles/${id}`)
      // map for actual http requests
    //.map(response => response.json())
    .subscribe(data => {
      let notFound = true;

      this.dataStore.articles.forEach((item, index) => {
        if (item.id === data.id) {
          this.dataStore.articles[index] = data;
          notFound = false;
        }
      });

      if (notFound) {
        this.dataStore.articles.push(data);
      }

      this._articles$.next(this.dataStore.articles);
    }, error => console.log('Could not load todo.'));
  }
}

然后我可以在组件中按预期显示列表：

import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { ArticleService } from '../shared';

@Component({
  moduleId: module.id,
  selector: 'app-home',
  directives :[
    ROUTER_DIRECTIVES
  ],
  providers:[
    ArticleService
  ],
  template: `
    <h1>My List</h1>
    <ul>
      <li *ngFor="let item of items$ | async; let i = index">
        <a [routerLink]="['/article', item.id]" > {{item.title}} </a>
      </li>
    </ul>
  `,
  styleUrls: ['home.component.css']
})
export class HomeComponent implements OnInit {
  items$ = null;
  constructor(private articleService: ArticleService) {
    this.articleService = articleService;
  }

  ngOnInit() {
    this.items$ = this.articleService.articles$;
    this.articleService.loadAll();
  }
}

但是如何在Item组件中显示单个Item，这就是我尝试过的：

import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES, ActivatedRoute, Router } from '@angular/router';
import { ArticleService } from '../shared';

@Component({
  moduleId: module.id,
  selector: 'app-article',
  providers: [
    ArticleService
  ],
  template: `
      <h1>{{item$.title}}</h1>
      <p>{{item$.content}}</p>
  `,
  styleUrls: ['article.component.css']
})
export class ArticleComponent implements OnInit {
  private sub: any;
  private id: number;
  private item$ = null;
  //  private all = null;

  constructor(private route: ActivatedRoute,
    private router: Router, private articleService: ArticleService) {
    this.route = route;
    this.articleService = articleService;
  }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      let id = +params['id']; // (+) converts string 'id' to a number
      //this.service.getHero(id).then(hero => this.hero = hero);
      this.id = id
    });

    this.articleService.load(this.id);
    //this.all = this.articleService.articles$;
    this.articleService.articles$
    .reduce((c, n) => {
      return n["id"] === this.id ? n : c;
     })
     .subscribe(data => {
        this.item$ = JSON.stringify(data);
      });
  }

}

我也尝试过滤：

this.articleService.articles$
    .filter((n) => {
        n["id"] === this.id ;

       })
      .subscribe(data => {
        this.item$ = data;
      });

抛出错误Argument of type '(n: Article[]) => void' is not assignable to parameter of type '(value: Article[], index: number) => boolean'

并选择一个项目：

.subscribe(data => {
    this.item$ = data[0];
});

如果我this.item$ = JSON.stringify(data[0])，最令人困惑的事情就是这样;当我在模板{{item$}}中引用{"id":1,"title":"Title 1","content":"content 1","author":"author 1"}而在没有stringify时引用[object Object]时它会显示为普通字符串但是当我引用{{item$.id}}或任何其他属性时，我会收到错误TypeError: Cannot read property 'id' of null

我注意到其他可能相关的问题包括：

我无法在reduce或filter函数内停止调试器
在几个场合（虽然现在发现很难重现）如果引用n.id而不是n["id"]我得到错误，因为它不存在，但是n["id"]确实

Answer 1

在插值内尝试Elvis运算符?.。

{{item$?.id}}

如果item$是假的（未定义，null等），它将无法访问id成员。

item$将null，直到您得到回复。

注意：您实际上可以在filter和类似功能中停止调试。只需将其设为多行。此外，当箭头功能采用多行显示时，您可以发出console消息。

在Angular2中检索单个项目rxjs的正确方法

1 个答案: