Создавайте динамические ионные карты, используя хранилище данных Ionic 3

Question

Я сохраняю некоторые строки (поступающие со входа), используя Ionic Storage через вызов сервиса local-storage.service.ts, затем преобразую его в вызов массива users потому что метод storage.get принимает только строку. Теперь я бы отображал эти элементы в моем представлении, используя ngFor, это работает для одного элемента, но я хотел бы отобразить 5 последних, чтобы создать ионную карту с ним.

Вся ионная карта должна быть создана с использованием данных, поступающих от пользователей (один вход и изображение с камеры)

Может быть, используя индекс, как я из индекса

Я пробовал это, но это не сработало:

  <h2 *ngFor="let user of users[0]">{{user}}</h2>
  <h2 *ngFor="let user of users[1]">{{user}}</h2>
  <h2 *ngFor="let user of users[2]">{{user}}</h2>
  <h2 *ngFor="let user of users[3]">{{user}}</h2>
  <h2 *ngFor="let user of users[4]">{{user}}</h2>

PS: Если это не совсем понятно, не стесняйтесь спрашивать меня, я останусь на некоторое время

myfile.html:

  <ion-input [(ngModel)]="inputext" class="daInput" type="text"></ion-input>


  <button class="charlotte-button addUser" ion-button icon-left 
 (click)="saveData()">
      <ion-icon class="picto picto-reply"></ion-icon>
      Add a user
    </button>

        <button class="charlotte-button addUser" ion-button icon-left 
 (click)="retrieveData()">
      <ion-icon class="picto picto-reply"></ion-icon>
      Load user
    </button>

     <ion-list>

          <button ion-item>
            <ion-avatar item-start>
              <img src="./assets/todelete/avatar-ts-deadpool.png">
            </ion-avatar>
            <h2 *ngFor="let user of users">{{user}}</h2> *<== This don't work* !!
          </button>
        </ion-list>
</button>
</ion-list>

myfile.ts:

 export class myFilePage {


   inputext: string;

   users = [this.inputext];

 constructor(  public localstorageservice: LocalStorageService ) {

saveData() {
   if (!null) {
     this.localstorageservice.setLocalStorage('index', this.inputext);
     this.users.push(this.inputext);
     console.log(this.users); // Here my array is filling correctly

 }
 }

 retrieveData() {
   this.localstorageservice.getLocalStorage('index', this.users).subscribe;
   console.log(this.users);
 }
}

вот мой local-storage.service.ts:

 export class LocalStorageService {

  constructor(public http: HttpClient, public storage: Storage) { }

  public setLocalStorage(path, data, params?) {
    this.storage.set(this.buildKey(path, params), data).then();
  }

  buildKey(path, params): string {
    let keyString = path;
    if (params) {
      Object.keys(params).map((key) => {
        keyString = keyString + '/' + key;
     });
    }
    return keyString;
  }

  public getLocalStorage(path, params): Observable<string> {
     return Observable.fromPromise((this.storage.get(this.buildKey(path, 
 params))));
  }

}

Answer 1

Я нахожу решение сам:), используя ion-list цикл следующим образом: возможно, это могло бы помочь кому-то еще:

        <ion-list *ngFor="let user of users; let i = index">
         <button ion-item>
            <ion-avatar item-start>
              <img src="./assets/todelete/avatar-ts-deadpool.png">
            </ion-avatar>
            <h2>{{user}}</h2>
          </button>
        </ion-list>