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

【问题标题】：Create dynamic ion cards using Ionic 3 storage data使用 Ionic 3 存储数据创建动态离子卡
【发布时间】：2018-11-27 11:03:53
【问题描述】：

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

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

也许使用索引作为让 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：如果不清楚，可以随时问我，我会待一会儿

我的文件.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>

我的文件.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))));
  }

}

【问题讨论】：

你搞错了。 ngFor 应该是 *ngFor
@Missak 你说得对，我会更新我的帖子
它工作正常。我不知道你有什么问题。但你在一个按钮内循环。设计会很丑

标签： typescript ionic-framework ionic3 ionic-storage

【解决方案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>

【讨论】：