Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/ruby-on-rails-3/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 我的新闻提要don';单击链接两次后才会显示_Angular_Typescript_Firebase_Angularfire2 - Fatal编程技术网

Angular 我的新闻提要don';单击链接两次后才会显示

Angular 我的新闻提要don';单击链接两次后才会显示,angular,typescript,firebase,angularfire2,Angular,Typescript,Firebase,Angularfire2,我正在开发这个小应用程序,它可以显示Firebase数据库中的新闻,但当我突然转到新闻链接或提要时,它不会显示,直到我在导航栏中单击两次链接,我正在使用angular,请帮助 这是我的服务文件: import {Injectable} from '@angular/core'; import {AngularFireDatabase} from 'angularfire2/database'; @Injectable({ providedIn: 'root' }) export clas

我正在开发这个小应用程序,它可以显示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);
  }
}

最好不要在构造函数中完成调用,也不要订阅()服务中的可观察对象。相反,在显示此数据的组件中返回并订阅它

新闻服务.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();
  }
}
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.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();
  }
}
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>
nav按钮
当然,这不是服务、组件或html中的唯一代码。。只是代码突出了您的问题