*ngFor of array not responding to array changes

Ionic Framework Ionic Angular
1

Hi all! :slight_smile:

I’ve got an ionic v6 capacitor app that builds buttons based on the content of an array, “sounds”. When the app starts, sounds is empty and no buttons appear. However, after a few seconds a Bluetooth BLE call fills in the sounds array with a bunch of sound names. However, the UI still shows no content unless I invoke a button to go retrieve the sounds. Ideally the UI would just update and the buttons would automatically appear.

Here’s my code:

  <div
    cdkDropList
    [ngClass]="btn-default"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
  >
    <div class="item-box">
      <div class="example-box" *ngFor="let sound of  sounds ; let i = index">
        <div class="example-box" cdkDrag>
          <ion-button
            class="btn-default"
            (press)="this.onPress($event, sounds[i])"
            (click)="this.playSound(sounds[i])"
          >
            {{sound}}
          </ion-button>
        </div>
      </div>
    </div>
  </div>

Here’s what the UI looks like:

Screenshot_20230720_124847_EVSound
Screenshot_20230720_124847_EVSound1440×2933 105 KB

And after the app connects to the BLE Peripheral the sounds come back and fill the sounds array. The UI doesn’t change until I press the Get Sounds button again - if the code was bound to the sounds array Angular change detection might cause the UI to update, but I can’t figure out how to bind it. Here’s what it looks like after you press the button again:

Screenshot_20230720_124828_EVSound
Screenshot_20230720_124828_EVSound1440×2933 246 KB

FWIW, the buttons are draggable and reorderable, but that’s not a requirement if another ionic construct might allow me to bind to the sounds array.

I read somewhere that Angular doesn’t notice an array changes content unless you create a copy of the array (which is a new object). Could that be what’s going on here? I’m grasping at straws… :frowning:

Thanks for any pointers or tips!

Bret