angular - 在我点击链接两次之前,我的新闻提要不会显示
问题描述
我正在开发这个显示来自 Firebase 数据库的新闻的小应用程序,但是当我突然转到新闻链接或提要时,它不会显示,直到我点击导航栏中的链接两次我正在使用 Angular 请帮助
这是我的服务文件:
import {Injectable} from '@angular/core';
import {AngularFireDatabase} from 'angularfire2/database';
@Injectable({
providedIn: 'root'
})
export class NewsService {
list: any[];
constructor(db: AngularFireDatabase) {
db.list('/actu').valueChanges()
.subscribe(list => {
this.list = list;
console.log(this.list);
});
}
Getlist() {
return this.list;
}
getnews(title: string) {
return this.list.find(value => value.titre === title);
}
}
解决方案
最好不要不完成构造函数中的调用,也不要 subscribe() 到服务内部的可观察对象。相反,将其返回并在显示此数据的组件中订阅它。
新闻服务.ts
import {Injectable} from '@angular/core';
import {AngularFireDatabase} from 'angularfire2/database';
@Injectable({
providedIn: 'root'
})
export class NewsService {
constructor(private db: AngularFireDatabase) {
}
Getlist() {
return db.list('/actu').valueChanges();
}
}
新闻组件.ts
import { NewsService } from './news.service';
//component declarations and imports ...
export class NewsComponent implements OnInit {
list: any[];
constructor(private newsService: NewsService){}
buttonClicked(){
this.newsService.Getlist().subscribe(list => {
this.list = list;
console.log(this.list);
})
}
}
news.component.html
<a (click)="buttonClicked()">nav button</a>
当然,这不会是您的服务、组件或 html 中的唯一代码。它只是突出您的问题的代码。
推荐阅读
- reactjs - 在反应中将卡片的内容从一页传递到另一页
- javascript - JavaScript/Express Promise.all() 问题
- here-api - 逐向导航中的测量单位
- flutter - 如何为大型项目编写 injection_container(服务注入器)
- python - tesseract-ocr个位数识别如何提高?
- flutter - Flutter - 如何隐藏全局底部导航栏?
- gremlin - 如何在 Amazon Neptune 中使用 gremlin 计算 PageRank 和最短路径算法?
- angular - Angular-Ionic:视频标签中的视频之间的无缝过渡?
- reactjs - 材质 ui 中的 ScopedCssBaseline 覆盖组件的 box-sizing
- sql - 多个插入/更新的 SQL 前缀