Как извлечь данные с помощью директивы * ngFor из хранилища на Ionic 3 (Cordova, Ionic 3, Angular 5) - PullRequest
Новая
       9

Как извлечь данные с помощью директивы * ngFor из хранилища на Ionic 3 (Cordova, Ionic 3, Angular 5)

0 голосов
/ 28 апреля 2018

Я использую хранилище Ionic для сохранения объекта данных javascript, который имеет несколько атрибутов. Я пытаюсь создать список избранного, который может получать данные из ионного хранилища.

Вот мои данные файл провайдера TS . 

  private items: any[] = [

    {
   "name": "item 01",
   "description": "this is item 01",
   "id": "1"
   },
    {
   "name": "item 02",
   "description": "this is item 02",
   "id": "2"
   },
    {
   "name": "item 03",
   "description": "this is item 03",
   "id": "3"
   },
   {
"name": "item 04",
 "description":"this is item 04",
 "id":"4"
 }
]

и я сохраняю элементы в моем html-файле с помощью кнопки. основной файл HTML использует директиву * ngFor let для извлечения элементов из провайдера.

Основной HTML: 

<div *ngFor="let item of items"> 
  <h2>{{item.name}}</h2>  
  <p>{{item.description}}</p>
  <button (click)="saveToFav(item)">Save to favorites</button>
</div>

Основной файл TS: 

savToFav(item) {
this.storage.set(this.item.id, this.item);
}

Это сохраняет элемент с его атрибутами в хранилище Ionic. Я вижу, что это появляется на странице проверки моего браузера -> приложения.

и я пытаюсь извлечь элементы из ионного хранилища на любимую HTML-страницу.

Любимая HTML страница: 

  <div *ngFor="let item of items"> 
      <h2>{{item.name}}</h2>  
      <p>{{item.description}}</p>
      <button (click)="remove(item)">Remove from favorites</button>
    </div>

Любимый файл TS 

    this.platform.ready().then(() => {
    this.storage.get(this.item);
});

Но это действительно ничего не загружает на любимую HTML-страницу ..

Что я должен сделать, чтобы выбрать каждый элемент, хранящийся в хранилище Ionic, на любимую страницу HTML?

Заранее спасибо,

1 Ответ

0 голосов
/ 28 апреля 2018

Вы используете функцию «получить и установить хранилище» неправильным образом. Все избранные элементы должны храниться в одной клавише, чтобы позже при необходимости вы могли получить весь список избранных. Это должно быть похоже на ниже 

savToFav(item) {
  this.storage.get('favoritesList')
  .then((fav)=>{
    if(fav == null){
       fav = [];
    }
    //This will fetch the old items and push the new item in array
    fav.push(item); return fav;
  })
  .then((fav)=>{
    //this will store the new update favorite list array in storage.
    this.storage.set('favoritesList',fav);
  })
}

//Favorite ts file you can use it like below 
this.storage.get('favoritesList').then((fav)=>{
 //you can asssing it any variable and use in your *ngFor loop
  this.myFavList = fav;
})
...