2017-05-09 74 views
0

我的代码:刷新页面后为什么我的项目被更改?

的.html

<ion-header> 
    <ion-navbar color="secondary"> 
    <ion-title>Reviews</ion-title> 
    <ion-buttons end> 
     <button ion-button icon-only (click)="addReview()"> 
     <ion-icon name="add"></ion-icon> 
     </button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <ion-list no-lines> 
    <ion-item-sliding *ngFor="let review of reviews"> 
     <ion-item> 
     <ion-avatar item-left> 
      <img src="https://api.adorable.io/avatars/75/{{review.title}}"> 
     </ion-avatar> 
     <h2>{{review.title}}</h2> 
     <p>{{review.description}}</p> 
     <ion-icon *ngIf="review.rating < 50" danger name="sad"></ion-icon> 
     <ion-icon *ngIf="review.rating >= 50" secondary name="happy"></ion-icon> 
     {{review.rating}} 
     </ion-item> 
    </ion-item-sliding> 
    </ion-list> 
</ion-content> 

.TS

import { Component } from '@angular/core'; 
import { NavController, ModalController } from 'ionic-angular'; 
import { Reviews } from '../../providers/reviews'; 
import { AddReviewPage } from '../add-review-page/add-review-page'; 


@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    reviews: any; 
    constructor(public navCtrl: NavController, public reviewService: Reviews, public modalCtrl: ModalController) { 

    } 
    ionViewDidLoad() { 
    this.reviewService.getReviews().then((data) => { 
     console.log(data); 
     this.reviews = data; 
    }); 

    } 

    addReview() { 

    let modal = this.modalCtrl.create(AddReviewPage); 
    modal.onDidDismiss(review => { 
     if (review) { 
     this.reviews.push(review); 
     // console.log('inside modal',review); 
     this.reviewService.createReviews(review); 
     } 
    }); 
    modal.present(); 

    } 



} 

.providers

import { Injectable } from '@angular/core'; 
import { Http,HttpModule } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

/* 
    Generated class for the Reviews provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular 2 DI. 
*/ 
@Injectable() 
export class Reviews { 

    data: any; 

    constructor(public http: Http) { 
    console.log('Hello Reviews Provider'); 
    this.data = null; 
    } 

    getReviews() { 
    if (this.data) { 
     return Promise.resolve(this.data); 
    } 
    return new Promise(resolve => { 
     this.http.get('http://localhost:8080/api/reviews').map(res => res.json()).subscribe(data => { 
     this.data = data; 
     resolve(this.data); 
     }); 
    }); 
    } 

    createReviews(review){ 
    this.http.post('http://localhost:8080/api/reviews',JSON.stringify(review)).subscribe(res=>{ 
     console.log('inside create review', res.json()); 
    }) 

    } 
} 

当我添加数据,项目用不同的化身添加成功。但是,当我刷新页面的项目被删除和ava焦油得到改变,为什么呢?下面提供了 屏幕截图。

Adding reviews

after refresing the page

this is how the db is looking with the values.

+0

看起来这是您的'../../providers/reviews';中的问题。 在该提供程序中,您通常将它们永久保存到API或localStorage。 你可以显示该提供者的代码吗? –

+0

@Hendrik Driesen,我已经更新了代码。 – Aditya

+0

'createReviews(review)'做了什么? – echonax

回答

1

是你在你的数据库后端正确添加和你在你的ionViewDidLoad的console.log(数据)得到正确数据的数据() ?如果您在那里获得正确的数据,请尝试将承诺更改为ionic2事件。 https://ionicframework.com/docs/api/util/Events/

刷新后丢失数据的原因是,在刷新页面之前,每个评论也保存在本地变量评论中:any ;.所以他不需要从后端获取它。

+0

我已经更新了数据库的屏幕截图。本地只存储具有该ID的对象。是否错误? – Aditya

+0

实际上,我在查询数据库时发现,我的数据只填写不正确。你能帮我解决这个问题吗? – Aditya

+0

我对数据库了解不多。你使用什么系统的数据库,是MongoDB吗?也许最容易打开一个关于数据库问题的新问题。在将其写入数据库之前,后端是否接收到正确的数据?如果它是基于节点的,只需使用console.log()来检查传入的请求。 –

相关问题