Home > Mobile >  Ionic 6 iterate form localstorage
Ionic 6 iterate form localstorage

Time:07-28

Hi there guys i fetch form my Laravel backend a object with some devices associated to logged user. I store the data into my Ionic localstorage in this way:

login(user: User): Observable<AuthResponse> {
return this.http.post(`${this.apiURL}/login`, user).pipe(
  tap(async (res: AuthResponse) => {
    console.log('res', res);
      await this.storage.set("ACCESS_TOKEN", res['data']['token']);
      await this.storage.set("id", res['data']['id']);
      await this.storage.set("devices", res['data']['devices']);

      console.log(this.authSubject);
      this.authSubject.next(true);
  })
);

}

SO now i need to create a ion-slides foreach devices that i fetch after login. I tried in my NgInit:

ngOnInit() {
this.storage.get("devices").then((value) => 
{
  console.log('devices', value);
    let devices = value;
});

}

but didn't work. I need to show devices as slideshow in my view:

  <ion-slides >
<ion-slide *ngFor="let device of this.devices">
  <ion-row>
  <h1>{{ device.name }}</h1>
  </ion-row>
  <ion-row>
    <img src="{{ device.image }}" >
  </ion-row>
</ion-slide>

CodePudding user response:

There you should bind devices to this context of component class, not in let variable

let devices = value

to

this.storage.get("devices").then((value) => {
  console.log('devices', value);
  this.devices = value
});

And on HTML just use devices in spite of this.devices

<ion-slide *ngFor="let device of devices">
  • Related