Adding items to array for primeng dropdown does not update the rendred dropdown

I'm trying to add a new item to a angular dropdown.

export class ClansOfCaledoniaComponent implements OnInit
public selectedGame: ClansGame;
public games = new Array<ClansGame>();

constructor(private readonly clansOfCaledoniaService: ClansOfCaledoniaService )

ngOnInit()
this.clansOfCaledoniaService.getListOfGames().subscribe(r =>
this.games = r;
this.selectedGame = this.games[0];
);

newGame()
var game = new ClansGame();
game.name = `Game $this.games.length + 1`;
let p = new Array<ClansPlayer>();
p.push(new ClansPlayer());
game.players = p;
this.clansOfCaledoniaService.save(game).subscribe(a =>
game.id = +a.status;
this.games.push(game);
this.selectedGame = game;
console.log(game);
);




The HTMl I'm using

<div class="ui-g-2">
<p-dropdown [options]="games" [(ngModel)]="selectedGame" optionLabel="name"></p-dropdown>
</div>
<div class="ui-g-2">
<button pButton type="button" label="New game" (click)="newGame()"></button>
</div>


For some reason the dropdown is not updated when I push the new game. How can I update the array ?

save

newGame()

r

game

1 Answer
1

Check this StackBlitz: Dropdown example

HTML file:

<p-dropdown [options]="games" [(ngModel)]="selectedGame" optionLabel="name" #acc></p-dropdown>

<button pButton type="button" label="New game" (click)="newGame(acc)</button>


TS file:

interface Game
name: string;


export class AppComponent
games: Game ;
selectedGame: Game;

constructor()
this.games = [
name:'Game1',
name:'Game2',
name:'Game3'
];


newGame(acc)
let newGame: Game = name: "NEW GAME" ;

this.games.push(newGame);

acc.options = this.games;




By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.