javascript - Varför renderas alla mina komponenter om när jag uppdaterar databasen?

Jag försökte uppdatera ett värde i Firebase RTDB och insåg att när jag gör det, laddas alla komponenter som är anslutna till det Observable om, varför är det så?

TS

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

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

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

  
})
export class AppComponent  {
squad = new Array;

timeline$: Observable<any[]>;
lineup$: Observable<any[]>;

  x$ = new BehaviorSubject<string>('first_race');
  
  constructor(private db: AngularFireDatabase) {

    // Get Lineups
    this.lineup$ = this.x$.pipe(switchMap((x) => {
      return this.db.list('lineups/'+x).valueChanges();
  }))


    // Get Timeline
      this.timeline$ = this.x$.pipe(switchMap((x$) => {
          return this.db.list(x$).valueChanges();
      }))




  }
  
  match_no(b: string) {
      this.x$.next(b);
  }

  changer(){
    this.lineup$.subscribe({next:(value: any[]) => this.squad.push(value[0])});
    console.log(this.squad[0])
  }

}

HTML

<div *ngFor="let lines of lineup$ | async">

<ng-container *ngIf="lines.lineups != undefined">
<button type="button" (click)='match_no("first_race")' (click)='changer()'>Game 1</button>


<div *ngFor="let tl of lineup$ | async">
<p *ngFor="let starting_lineup of tl.lineups[0].starting_lineup">{{ starting_lineup.name}}</p>
</div>
</ng-container>
</div>

Datan ser ut så här

JSON

"lineups":{
"first_race":[
    {
    "lineups":[{
        "starting_lineup":[
                {
                "name": "Racer 1",
                "position": "1",
                "car": "fast_bigwheel_car"
                },
                {
                "name": "Racer 3",
                "position": "2",
                "car": "fast_flying_car"
                },
                {
                "name": "Racer 2",
                "position": "3",
                "car": "fast_small_car"
                }
        ]

    }]

}]

}

Om jag ska gå till Racer 2 och ändra "car" från "fast_small_car" till något annat så uppdateras hela appen. Jag tänkte att det kan ha något att göra med <ng-container *ngIf="lines.lineups != undefined"> men jag behöver det eftersom ibland kommer det tillbaka tomt och då renderar inte appen korrekt.

Hjälp här !!!

Svar #1

Försök använda trackBy så att *ngFor vet vilka element som ska uppdateras och inte uppdateras, detta kan lösa ditt problem!

<div *ngFor="let lines of lineup$ | async; trackBy: trackByIndex">

    <ng-container *ngIf="lines.lineups != undefined">
    <button type="button" (click)='match_no("first_race")' (click)='changer()'>Game 1</button>


    <div *ngFor="let tl of lineup$ | async; trackBy: trackByIndex">
         <p *ngFor="let starting_lineup of tl.lineups[0].starting_lineup; trackBy: trackById">{{ starting_lineup.name}}</p>
    </div>
    </ng-container>
</div>

Funktionerna kommer att vara

trackByIndex(index: number) {
    return index;
}

trackById(_index: number, item: any) {
    return item.id;
}