Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is it not possible to change this route after initial load?

I am trying to update the path to Firebase RTDB when I click a button, but angular won’t allow. I am using angular-fire.

This is the HTML


<button type="button" (click)='race_no("race_no_2")'>Race 2</button>


  <div *ngFor="let item of items | async">
       <p *ngFor="let race_lineup of item.lineups[0].race_lineup"     >{{ race_lineup.name }}</p>
</div>

This is the Component


import { Component, OnChanges, OnInit, SimpleChanges, Inject } from '@angular/core';

import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

  
})
export class AppComponent implements OnChanges, OnInit {
  items: Observable<any[]>;
  
  x = "race_no_1";
  
  constructor(private db: AngularFireDatabase) {
          this.items = this.db.list(this.x).valueChanges();

  
  }

  ngOnChanges(x: SimpleChanges) {
    this.items = this.db.list(this.x).valueChanges();  
console.log(this.x)
  }  
  
  ngOnInit(): void {
  }

  race_no(b: string){
this.x = b;
  }

}

I am expecting that when the button is clicked ngOnChanges is triggered due to the fact that the string x would have changed.


  ngOnChanges(x: SimpleChanges) {
    this.items = this.db.list(this.x).valueChanges();  
console.log(this.x)
  }

Using HTTP.Get the same behaviour works just fine, seems like ngOnChanges don’t even recognize the change here.

What is wrong here ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As Sam Scholefield mentioned to me. Just add the logic to the race_no method.

     race_no(b: string){
    this.items = this.db.list(b).valueChanges();  
  }

  2. 0

    You can just use a BehaviorSubject for that

    items$: Observable<any[]>;
x$ = new BehaviorSubject<string>('race_no_1');

constructor(private db: AngularFireDatabase) {
    this.items$ = this.x$.pipe(switchMap((x) => {
        return this.db.list(x).valueChanges();
    }
}

race_no(b: string) {
    this.x$.next(b);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search