Question

我的代码：

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

  }
}

当我添加数据时，项目会成功添加不同的头像。但是当我刷新页面时，项目将被删除，头像会被更改。为什么会这样？截图提供如下。

Answer 1

您在后端的数据库中正确添加的数据是否在ionViewDidLoad（）中的console.log（数据）中获得了正确的数据？如果您获得了正确的数据，请尝试将promise更改为ionic2事件。 https://ionicframework.com/docs/api/util/Events/

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

为什么刷新页面后我的项目会被更改？

1 个答案: