petrxh
petrxh

Reputation: 9

Updating streamed data in Angular 17 is too slow (using async pipe) comparing to older versions of Angular

I have an application which receives each second status update and time to finish from the server via ms-signalR. It is a list of production orders containing up to 10 changing rows with production order data. The application was written in an older version of Angular (8 and then several times updated) and it worked very well. But after the updating angular to version 17 it started to be very slow. Orders are updated only once per 16 seconds. I've figured out using try and error, that it works when I publish it in a developper mode and with subscription to the observable which runs cdr.detectChanges() and only in chrome, not in firefox. Array of orders is zeroed (array.length = 0) and built again after each update.

the service looks like this:


  private __auftrags: Auftrag[] = [];
  private _auftrags: Subject<Auftrag[]>;


  public addAndonListener() {
    (this.hub??null)?.on('updateauftrags', (auftrags) => {
      //console.log(auftrags);
      this.parseAuftrag(auftrags);
      this.auftragsNext();
    });
  }
  
  public auftragsNext() {
    this._auftrags.next(Array.from(this.__auftrags));
    //console.log("auftrags next");
  }


  public parseAuftrag(auftrags: AuftragResource[]) {
    this.__auftrags.length = 0;
    for (let i: number = 0; i < auftrags.length; i++) {
      for (let a: number = 0; a < auftrags[i].workcenters.length; a++) {
        let na: Auftrag = new Auftrag(auftrags[i]);
        na.AddWorkcenter(auftrags[i].workcenters[a]);
        this.__auftrags.push(na);
      }
    }
    if (this.__auftrags.length > 0)
      this.__auftrags.sort((a, b) => {
        return this.comparer(a, b);
      });
    this.auftragsNext();
    //console.log(this.__auftrags);
  }

and component like this:

  auftrags$!: Observable<Auftrag[]>;

  ngOnInit(): void {
//    this.auftragsService.auftrags.subscribe({
//      next: (res: Auftrag[]) => {
//        this.cdr.detectChanges();
////        console.log("auftrags changed");
//      }
//    });
    this.auftrags$ = this.auftragsService.auftrags;  
 }

      @for (a of auftrags$ | async; track a){
      <tr (click)="auftragClicked(a.FA, a.Pracoviste)">
        <td class="fa">{{a.FA}}</td>
        <td>{{a.VIN}}</td>
        <td>{{a.Typ}}</td>
        <td>{{a.KDA}}</td>
        <td class="workers">
          <table>
            @for (w of a.Workers; track w.Pernr){
                <tr (click)="workerClicked(w.Pernr)">
                  <!-- <tr *ngFor="let w of a.Workers" (click)="workerClicked(w.Pernr)"> -->
                  <td width="100px">{{w.Pernr}}</td>
                  <td>{{w.Name}}</td>
                </tr>
            }
          </table>
        </td>
        <td class="prac">{{a.Pracoviste}}</td>
        <td [ngClass]="getCasClass(a.CasDoKonce)">{{a.CasDoKonce | sec2time}}</td>
        <td [ngClass]="getCasClass(a.ZbytkovyCas)">{{a.ZbytkovyCas | sec2time}}</td>
        <td>{{a.LT}}</td>
        <td>{{a.Matnr}}</td>
      </tr>

If I uncomment the subscription in ngOnInit and enforce the change detection, the view is updated as expected (but only in chrome and if published in developer mode). Otherwise view is updated aproximately once per 16 seconds...

Is there any way how to make it work as before with the Angular 17? Thanks for any help.

Upvotes: 0

Views: 122

Answers (0)

Related Questions