单击按钮从 Firebase 中选择一个项目

Question

我正在使用 Angular 6 和 Firebase，我需要从 Firebase 获取所有项目，然后一次只显示一个项目，直到单击下一个按钮

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>/*this is the .ts file*/
    constructor( public af: AngularFire, public db: AngularFireDatabase) {
        this.items = db.list('items').valueChanges();
        db.list('/sentences').valueChanges().subscribe(sentences => {
          this.sentences = sentences;
          console.log(this.sentences);
        });
      }

<!--this in the html-->
    <div>
        <ul class="sent">
          <li *ngFor="let sentence of sentences"
              [class.selected]="sentence === selectedsentence"
              (click)="onSelect(sentence)">{{sentence}}

              <!-- this is displaying all the items in the firebase; i need only one at a time-->
          </li>
        </ul>
    </div>
   

Answer 1

//in the ts file
 constructor( public db: AngularFireDatabase) {
  this.items = db.list('items').valueChanges();
  db.list('/sentences').valueChanges().subscribe(sentences => {
    this.sentences = sentences;
    console.log(this.sentences);
    this.labels = this.sentences; //in this.labels we have all the elements *declaration : labels=[]
    console.log(this.labels);

  }); 
onSkip($i) {
  if (this.i > 13) { //if there are 13 elements in the database
    this.i = 0;
  }

  this.i = this.i + 1;
  console.log(this.i);
}    

 // in the html code
 {{labels[i]}}  

 <button class="centered" (click)="onSkip(i)" > SKIP  <a routerLink="skip">