離子存儲 - 讀取數據給我[對象的對象]

我經由離子存儲存儲JSON陣列是這樣的：離子存儲 - 讀取數據給我[對象的對象]

this.storage.set('data', this.data).then().catch(err => { 
    this.data.splice(this.data.indexOf(Data), 1); 
});

和在函數取它：

fetchData(){ 
    this.storage.get('data').then(
     (data: {value: string, usage: string, date: string, addedDate: string}[]) => { 
     this.data = data != null ? data : []; 
     console.log('DATA FETCHED: ' + data); 
     return data; 
     } 
    ).catch(err => { 
     console.log(err); 
    }); 
    }

我存儲陣列中的4個對象，但console.log只是給了我這個回來：

DATA FETCHED: [object Object],[object Object],[object Object],[object Object]

我應該怎麼做才能讓數組顯示ri GHT？

<ion-item *ngFor="let item of items"> 
    <h2>{{ item.usage }}</h2> 
    <p>{{ item.date | date:'dd MMM yyyy' }}</p> 
    <h1 item-end ngClass="{{ item.value.charAt(0) === '-' ? 'expense' : 'income' }}">{{ item.value }} €</h1> 
    <!--<h1 item-end class="income">+ 450,00 €</h1>!--> 
</ion-item>

home.ts：我已經用的ToString（）和.slice（）在home.html的

相關部分試圖

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    items: any = this.moneyService.fetchData(); 

    incomeval: any = IncomevalPage; 
    expenseval: any = ExpensevalPage; 

    constructor(public navCtrl: NavController, private moneyService: MoneyService) {} 

    ionViewWillEnter(){ 
    this.items = this.moneyService.fetchData(); 
    } 
}

來源

2017-11-11 Yassine Zeriouh

嘗試將log語句更改爲'console.log（'DATA FETCHED：'，data）;'。如果沒有將所有東西都轉換爲字符串，將會更容易理解正在發生的事情。 –

@AndréLaszlo這給了我正確的數組對象，但它仍然不會顯示在應用程序中 –

好吧，聽起來不錯。你還可以請分享模板和組件/應用程序的其他相關部分？ –

我認爲，除了馬可在他的回答中所說的，問題在於，不要從fetchData()返回任何東西。 return語句在promise中。承諾可能需要一段時間才能習慣，但是如果你返回結果，這將是一個新的承諾和新的價值。這可能是更容易用一個例子就明白了：

var promise = Promise.resolve("first").then(val => "second"); 
promise.then(val => console.log("val is", val)); 
// Prints: "val is second"

您設置MoneyService的this.data，但它不是在HomePage組件的任何地方訪問。

如果你改變fetchData這樣：

fetchData(){ 
    return this.storage.get('data').then((data: {value: string, usage: string, date: string, addedDate: string}[]) => { 
    return data != null ? data : []; 
    }); 
}

現在會返回一個承諾，你將不得不照顧恰當地HomePage，也許是這樣的（未經測試）：

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    items: any; 

    incomeval: any = IncomevalPage; 
    expenseval: any = ExpensevalPage; 

    constructor(public navCtrl: NavController, private moneyService: MoneyService) { 
     moneyService.fetchData().then(result => this.items = result); 
    } 
}

一旦數據可用，它將立即更新this.items。

來源

2017-11-11 18:54:50

你需要一些修正與home.ts：

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    items: any; 
    moneyService: any; 

    incomeval: any = IncomevalPage; 
    expenseval: any = ExpensevalPage; 

    constructor(public navCtrl: NavController, data: MoneyService) { 
    this.items = null; 
    this.moneyService = data; 
    } 

    ionViewWillEnter(){ 
    this.items = this.moneyService.fetchData(); 
    } 
}

來源

2017-11-11 18:27:30

仍提取數據但不顯示它 –

離子存儲 - 讀取數據給我[對象的對象]

回答

相關問題