PrimeNG: dropdown, orderlist etc non si aggiornano aggiungendo elementi

PrimeNG ha alcuni elementi che caricano il modello da un array, es.

<p-orderList [value]="cars">
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name">

Se nella nostra applicazione abbiamo bisogno di aggiungere dei valori, si potrebbe pensare di fare push di un elemento nell’array:

this.cars.push(car);

In questo modo però vediamo che l’elemento non viene visualizzato. Se usiamo una orderlist, vediamo che riordinando gli elementi, allora si vede il nuovo elemento.

Il problema deriva dal fatto che per triggerare i meccanismi di binding di Angular è necessario sostituire l’array e i tipi non primitivi, non è sufficiente aggiungere un elemento.

Per questo, è necessario sostituire il codice qui sopra con:

this.cars = [...this.cars, car];