所以最近我已经了解了主题,我正试图在个人项目中使用它们.我有一个服务从json文件中获取数据并将其转换为“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获取并再次清理文章列表清理?
最佳答案 您实际上没有在显示组件中订阅您感兴趣的主题.您只订阅填充您感兴趣的主题的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
}