Как добавить новый элемент в массив JSON с http в Ionic 3? - PullRequest
Новая
       30

Как добавить новый элемент в массив JSON с http в Ionic 3?

0 голосов
/ 19 ноября 2018

У меня есть вопрос, который я пытаюсь решить неделю из интернета, но ни один пример не работает: у меня есть проект ionic3, в котором есть файл json с «списком задач», подобным этому: 

{
  "todos": [
    {"id":1,"title": "Do something", "complete": done},
    {"id":2,"title": "Do something else", "complete": undone}
 ]
}

Итак, я запускаю свой json-сервер и мой ионный сервер.В проекте Ionic есть провайдер, с функцией get, страница, на которой я визуализирую задачи (контроллер + представление + модуль + scss как соглашение).

В моем провайдере у меня есть эта функция для получения задач: 

public get():Observable<any> {
    return this.http.get (this.apiUrl+'/todos';
}

И в моем контроллере у меня есть объявления перед конструктором: todos: any;todo = {id: '', title: '', complete: ''}, и этот код в конструкторе для использования моего провайдера: 

constructor(public.....){
    this.provider.get().subscribe(todo=>{this.todos=todo;}});

На мой взгляд, у меня есть список ионов с ионом-item * ngДля разрешения задач todo, и я печатаю todo.id, todo.title и todo.complete.

Теперь, как создать метод в провайдере, прочитайте этот метод в моем контроллере страниц и напечатайте впо моему мнению, это добавляет новый todo в мое приложение и добавляет его в мой список?

app.module 

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { IntroPageModule } from '../pages/intro/intro.module';
import { TodoPageModule } from '../pages/todo/todo.module';
import { FormsModule, ReactiveFormsModule  } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { HeroServiceProvider } from '../providers/hero-service/hero-service';
import { RestprintPageModule } from '../pages/restprint/restprint.module';



@NgModule({
  declarations: [
    MyApp,
    HomePage,

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IntroPageModule,
    TodoPageModule,
    RestprintPageModule,
    HttpClientModule,
    IonicModule,
    FormsModule,
    ReactiveFormsModule 


  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage


  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    HeroServiceProvider
  ]
})
export class AppModule {}

поставщик 

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'Rxjs/Rx';


/*import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';*/

/*
  Generated class for the HeroServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

@Injectable()
export class HeroServiceProvider {
  apiUrl = 'http://localhost:3000'; 
  todos:any;


  constructor(public http: HttpClient) {
    console.log('Hello HeroServiceProvider Provider');
  }


public getJSON(): Observable<any> {
  return this.http.get(this.apiUrl + '/todos');
}

}
pageController

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HeroServiceProvider } from '../../providers/hero-service/hero-service';




/**
 * Generated class for the RestprintPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-restprint',
  templateUrl: 'restprint.html',
})


export class RestprintPage {
 resolve:any;
 reject:any;

  todos:any;
  todo = { id: '', title: '', complete: ''};
  constructor(public navCtrl: NavController, public navParams: NavParams, public heroServiceProvider: HeroServiceProvider) {

    this.heroServiceProvider.getJSON().subscribe(todo => {
      this.todos=todo;
  });


  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad RestprintPage');
  }

}

pageView 

<ion-header>
  <ion-navbar>
    <ion-title>restprint</ion-title>
  </ion-navbar>

</ion-header>

  <ion-content padding>
    <ion-list inset>
    <ion-item *ngFor="let todo of todos">
       <h1>{{todo.id}}</h1>
       <h2>{{todo.title}} </h2>
       <p>{{todo.complete}}</p>
    </ion-item>
        </ion-content>

файл db.json 

{
  "todos": [
    {
      "id": 1,
      "title": "Gym",
      "complete": "undone"
    },
    {
      "id": 2,
      "title": "SAL h 15",
      "complete": "undone"
    }
  ]
}

СПАСИБО!

...