[Angular] Tabella non si refresha

[fermat]

ciao!

ho un problema con l'aggiunta di righe ad una tabella.
in pratica:

  <p-table #dt
           [value]="ordineRighe"
           styleClass="p-datatable-gridlines p-datatable-sm p-datatable-striped"
           dataKey="or_id"
           sortField="pr_nome"
           [sortOrder]="1"
           responsiveLayout="stack"
           [breakpoint]="'960px'"
           [tableStyle]="{'min-width': '50rem'}">
    <ng-template pTemplate="header">
      <tr>
        <th pSortableColumn="pr_nome" style="min-width:12rem" class="white-space-nowrap">
          Nome
          <p-sortIcon field="pr_nome"></p-sortIcon>
        </th>


        <th pSortableColumn="or_prezzo_acq" style="min-width:12rem" class="white-space-nowrap">
          Prezzo acquisto
          <p-sortIcon field="or_prezzo_acq"></p-sortIcon>
        </th>


        <th pSortableColumn="pr_prezzo_vnd" style="min-width:12rem" class="white-space-nowrap">
          Prezzo vendita
          <p-sortIcon field="or_prezzo_vnd"></p-sortIcon>
        </th>


        <th></th>
      </tr>
    </ng-template>


    <ng-template pTemplate="body" let-item>
      <tr>
        <td>{{ item.pr_nome }}</td>


        <td>{{ item.or_prezzo_acq }}</td>


        <td>{{ item.or_prezzo_vnd }}</td>


        <td style="text-align: center">
          <button pButton type="button" icon="pi pi-trash" pTooltip="Cancella" (click)="delRiga(item)"
                  class="p-button-outlined p-button-rounded p-button-danger p-button-raised p-button-sm"></button>
        </td>
      </tr>
    </ng-template>
  </p-table>

poi in init:

ordineRighe: OrdineRighe[];


  ngOnInit(): void {
    this.ordineRighe = [
      {
        "or_id": 0,
        "pr_nome": "test",
        "or_prodotto_fk": 2,
        "or_prezzo_acq": 120,
        "or_prezzo_vnd": 120,
        "or_utente_fk": 1,
        "or_note": ""
      },
      {
        "or_id": 0,
        "pr_nome": "test 2",
        "or_prodotto_fk": 1,
        "or_prezzo_acq": 100,
        "or_prezzo_vnd": 100,
        "or_utente_fk": 1,
        "or_note": ""
      }
    ];
  }

e fin qui. ok, ci sono due righe e si vedono.
poi su un bottone ho aggiunto una funzione per aggiungere una riga:

  addRiga(): void {
    const or = {} as OrdineRighe;
    or.or_id = 0;
    or.or_prodotto_fk = this.frmRiga.value.or_prodotto_fk;
    or.or_prezzo_acq = this.frmRiga.value.or_prezzo_acq;
    or.or_prezzo_vnd = this.frmRiga.value.or_prezzo_vnd;
    or.or_utente_fk = this.frmRiga.value.or_utente_fk;
    or.or_note = this.frmRiga.value.or_note;
    or.pr_nome = this.drpProdotti.selectedOption.pr_nome;
    this.ordineRighe.push(or);


    this.frmRiga.controls['or_prodotto_fk'].setValue('');
    this.frmRiga.controls['or_prezzo_acq'].setValue(0);
    this.frmRiga.controls['or_prezzo_vnd'].setValue(0);
    this.frmRiga.controls['or_note'].setValue('');


    console.log(this.ordineRighe);
  }

nella console vedo tre righe, ma sulla pagina ne vedo sempre due.
e questo succede anche quando clicclo sul pulsante di cancellazione riga.

qualche idea??

[fermat]

bastava aggiungere questa riga:

this.ordineRighe = [...this.ordineRighe];