How to remove select options for angular primeng dropdown

Issue

I'm trying to remove an item from a primeng drowdown

Init

ngOnInit() {
    this.characterList = [  
       {  
          "label":"Select character",
          "id":"-1"
       },
       {  
          "label":"New",
          "id":"0"
       },
       {  
          "id":32,
          "label":"Test2 "
       }
    ]
    this.character =  {  
              "id":"32",
              "label":"Test2 "
           }
}

The delete function

delete(): void {
    this.characterList.forEach((item, index) => {
      if (+this.character.id === +item.id)
        this.characterList.splice(index, 1);
    });
}

The html:

<p-dropdown [options]="characterList" [(ngModel)]="selectedCharacter" (onChange)="selectCharacter($event)" optionLabel="label"></p-dropdown>
<button pButton type="button" label="Delete character" (click)="delete()"></button>

But for some reason the p-dropdown isn't updated. What am I doing wrong?

Solution

I found one way to solve the problem. Here is the sample code that works:

HTML:

<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" #drop></p-dropdown>
<button (click)="delete(drop)">DELETE</button>

JS

export class AppComponent {

cities: City[];
selectedCity: City;

constructor() {
    //An array of cities
    this.cities = [
        {name: 'New York', code: 'NY'},
        {name: 'Rome', code: 'RM'},
        {name: 'London', code: 'LDN'},
        {name: 'Istanbul', code: 'IST'},
        {name: 'Paris', code: 'PRS'}
    ];
    this.selectedCity = this.cities[0];
}
delete(drop):void{
  this.cities.forEach((item, index) => {
    if (item.name === this.selectedCity.name)
      this.cities.splice(index, 1);
  });
  this.selectedCity = this.cities[0];
      drop.options=this.cities;
    }
}

So it seems like you manually have to update the options for it to refresh.

Answered By - devzero