Angular 4 RxJs Observable Subjects 数组未使用新对象更新

Question

最近我了解了 Subjects，我正尝试在个人项目中使用它们。我有一项服务可以从 json 文件中获取数据并将其转换为 "Article" 类型。 Article 是一个自定义项 class，其中包含有关博客文章的信息。

我的最终目标是获取这个文章数组，然后当我按下 + 按钮时，它会在当前列表中添加一个新的空白文章，视图应该通过显示空白来表示它带有一些默认值的文章。这不会保留（保存到 json）新的空白文章，而只是将其添加到当前列表，以便视图更新并显示它。稍后会保存。

我这辈子都做不到。所有文章都正确显示在我的 "article list" 页面上，但手动将空白文章推送到它似乎根本没有做任何事情。

这是我的服务文件

@Injectable()
export class ArticleService {

  headers: Headers;

  options: RequestOptions;

  articles: ReplaySubject<Article[]>;

  private url = 'data/articles.json';

  constructor(private http: Http) { 
    this.headers = new Headers({ 'Content-Type': 'application/json' });
    this.options = new RequestOptions({ headers: this.headers });
    this.articles = new ReplaySubject<Article[]>();
  }

  /**
   * fetch a list of articles
   */
  getArticles(): Observable<Article[]> {

    // no articles fetched yet, go get!
    return this.http.get(this.url, this.options)
                    .map(response => <Article[]>response.json())
                    .do(data => this.articles.next(data))
                    .catch(this.handleError);
  }

  /**
   * add a new article to the list
   * @param article 
   */
  addArticle(article: any): void {
    this.getArticles().take(1).subscribe(current => {

      //
      //
      // THIS WORKS. this.articles is UPDATED successfully, but the view doesn't update
      // IT ALSO LOOKS LIKE this.articles may be being reset back to the result of the get()
      // and losing the new blank article.
      //
      //

      current.push(article);
      this.articles.next(current);
    });
  }

  ...
}

我有一个列表组件更新列表如下：

export class ArticleListComponent implements OnInit {

    articles: Article[];

    public constructor(private articleService: ArticleService) { }

    ngOnInit(): void {
      this.getArticles();
    }

    getArticles(): void {
      this.articleService.getArticles().subscribe(articles => this.articles = articles);
    }
}

以及创建新空白文章的另一个组件：

export class CreatorComponent {

    articles: Article[];

    public constructor(private articleService: ArticleService) { }

    /**
     * add a new empty article
     */
    add(): void {
        let article = {};
        article['id'] = 3;
        article['author'] = "Joe Bloggs";
        article['category'] = "Everyday";
        article['date'] = "November 22, 2017"
        article['image'] = "/assets/images/post-thumb-m-1.jpg";
        article['slug'] = "added-test";
        article['title'] = "New Via Add";
        article['content'] = "Minimal content right now, not a lot to do."

        this.articleService.addArticle(article);
    }
}

我可以调试，服务上的 this.articles 属性似乎更新了新的空白文章，但视图没有改变，我不能确定但似乎那篇文章一添加就丢失了。 observable 是否再次重复 http get 并清理文章列表？

Answer 1

您实际上还没有在您的显示组件中订阅您感兴趣的主题。您只订阅填充您感兴趣的主题然后终止的 http 调用。尝试更像这样：

private articleSub: Subscription;
ngOnInit(): void {
  this.articleSub = this.articleService.articles.subscribe(articles => this.articles = articles);
  this.articleService.getArticles().subscribe();
}

ngOnDestroy() { //make sure component implements OnDestroy
    this.articleSub.unsubscribe(); // always unsubscribe from persistent observables to avoid memory leaks
}

Angular 4 RxJs Observable Subjects 数组未使用新对象更新

Angular 4 RxJs Observable Subjects array not updating with new object

javascript

observable

rxjs

subject-observer

angular