Question

我通过服务调用 local-storage.service.ts 使用Ionic Storage存储一些字符串（来自输入），然后我将其转换为数组调用users，因为存储.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>

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

1 个答案: