Ionic 4 - Refresh HTML data on click

I get rendered data after app loaded, but when I click on “refreshOp()” button, I can’t refresh my HTML data but I can see objects only in console mode, but not in HTML rendered.

Any hints ? Thanks.

result.service.ts

export class ResultsService {
  myService: any;

  constructor(private httpService: HttpClient) {

    this.checkAllLoggedOp();

  }

   public checkAllLoggedOp() {
    this.items = this.httpService.get('https://mysite').map(res => res);
    return this.items;
  }


result.page.html

    <ion-buttons slot="start" (click)="refreshOp()"> <-- click here update app.component.html
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>


app.component.ts

export class AppComponent implements OnInit {

  ngOnInit() {
      this.refreshOp(); <-- works after app loaded
  }

  refreshOp() {
      this.myService.checkAllLoggedOp().subscribe((res: any) => {
          this.items = res;
      });
  }

}


app.component.html

      <ion-list *ngFor="let item of items">
        <ion-item>
          <div class="icon-status" slot="end">         
            <ion-icon name="{{item.status}}"></ion-icon>
          </div>
      </ion-item>

Always declare proper types (i.e. not any) for all function parameters and return types. I use and recommend the following settings in tsconfig.json:

    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true

So try doing that and then post enough of what you have that would actually compile. There are two places where items are tantalizingly used but not declared, and your .map(res => res) is a very strange vestigial fragment. Why is it there and what is it supposed to be doing?