[英]Angular 4 RxJs Observable Subjects array not updating with new object
因此,最近我了解了主題,並試圖在個人項目中使用它們。 我有一個從json文件中獲取數據並將其轉換為“ Article”類型的服務。 文章是一個自定義類,用於保存有關博客文章的信息。
我這里的最終目標是獲取此文章數組,然后當我按+按鈕時,它將新的空白Article添加到當前列表中,並且該視圖應通過顯示具有一些默認值的空白文章來表示它。 這不會保留(另存為json)新的空白文章,而只是將其添加到當前列表中,以便視圖更新並顯示它。 保存將在以后。
我無法一輩子都可以使用它。 所有文章都正確顯示在我的“文章列表”頁面上,但是手動將空白文章推送到它似乎根本沒有任何作用。
這是我的服務檔案
@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屬性似乎已使用新的空白文章進行了更新,但是視圖並沒有改變,我不能肯定地說,但是似乎該文章很快就丟失了無論如何盡快添加。 可觀察到的重復http get和擦洗文章列表是否再次干凈?
您實際上尚未在顯示組件中訂閱您感興趣的主題。 您只訂閱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
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.