0

So I have the following html:

<div>

    <ion-item id="homeTrigger" color="dark"></ion-item>


    <ion-modal trigger="homeTrigger">
      <ng-template>
        <ion-header color="dark" translucent>
          <ion-toolbar color="dark">
            <ion-searchbar [(ngModel)]="searchTerm" (ionChange)="setFilteredItems($event.target.value)"></ion-searchbar>
          </ion-toolbar>
        </ion-header>

        <ion-content color="dark">
          <ion-list>
            <ion-item color="dark" *ngFor="let item of worldArray;"> {{ item.title }} </ion-item>
          </ion-list>
        </ion-content>
      </ng-template>
    </ion-modal>
<div>


  public worldArray: any = [];

  public setFilteredItems(searchTerm) {

    this.service.searchService(searchTerm).then((res) => {
      this.worldArray.splice(this.worldArray.length - 1, 1);
      this.worldAirportsArray = res;
      console.log(JSON.stringify(this.worldArray));
    });
  }

Now when searching the worldArray is updated. But the view inside the model is not. If I place the search functionality outside the model then the view updates. So how can I make it so that the list in the model updates. Note if I close the model then reopen it then the updated list is show.

Wondering how I can fix this?

Thanks

Maverick1994
  • 91
  • 7
  • Try, `this.worldArray = [...this.worldArray]` to trigger Angular's change detection. – alex87 Jan 13 '22 at 03:08
  • @alex87 the change is being detected just the view is not updating in the model. If I place outside the model then it works – Maverick1994 Jan 13 '22 at 21:02

1 Answers1

0

You can use ChangeDetectorRef (https://angular.io/api/core/ChangeDetectorRef#changedetectorref) to check and update the list every 0.5 seconds or more...

For example:

constructor(private ref: ChangeDetectorRef) {
    console.log('Hello PhotoComponent Component');  
    setInterval(() => {
      this.ref.detectChanges();
    }, 500);  
  }
Gevorg Sahakyan
  • 68
  • 3
  • this is not the best solution , but it maybe work for you – Gevorg Sahakyan Jan 13 '22 at 10:58
  • Hi, thank you for trying to help. This solution also doesn't work not does @alex87. So as in my question if I place the search and list outside the model then the list updates no problem. Its just when its inside the model it doesn't for some reason – Maverick1994 Jan 13 '22 at 17:20