0

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

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

也许使用索引作为索引的让 i

我试过了,但它不起作用:

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

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

}
4

1 回答 1

0

我自己找到了解决方案:) 使用 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>
于 2018-06-19T12:40:25.820 回答