使用 Ionic 3 存储数据创建动态离子卡

Question

我通过服务调用 local-storage.service.ts 使用 Ionic Storage 存储一些字符串（来自输入），然后我将其转换为数组调用 users 因为 storage.get 方法只接受字符串。现在我将使用 ngFor 将这些项目显示到我的视图中，它适用于一个项目，但我想显示最后 5 个以用它创建一个离子卡。

整个离子卡应该使用来自用户交互的数据创建（一个输入和一张来自相机的图片）

也许使用索引作为 let i of index

我试过了，但没用：

  <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);
 }
}

这是我的本地-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>

使用 Ionic 3 存储数据创建动态离子卡

Create dynamic ion cards using Ionic 3 storage data

typescript

ionic-framework

ionic3

ionic-storage