Separate array elements with *ngFor

I'm working on an assignment where I have to, using Angular, generate random 12 numbers and put them in a list (one number per one list element).

Right now I'm getting result in which every od 12 list items looks the same i.e.

• 1674,4769,3549,7093,6751,6277,2980,427,2358,257,5558,8331

I can't find a solution on how to put each of the random digits in a separate bullet.

HTML:

<button (click)="generateNumbers()">Wygeneruj liczby</button>
<li *ngFor="let number of randomNumbers">
  
</li>

component.ts

public randomNumbers: number[];

  generateNumbers(){
    let array: number[] = [];
    while (array.length <12 ) {
      array.push(Math.floor(Math.random() * 8719));
    }
    this.randomNumbers = array;
  }

What am I missing here?

Thanks in advance for any advice! :)