我通过服务调用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))));
}
}