Angular 6: изменить свойство объекта и сохранить его в базе данных (In-memory Web API) - PullRequest
Новая
       37

Angular 6: изменить свойство объекта и сохранить его в базе данных (In-memory Web API)

0 голосов
/ 18 октября 2018

У меня есть класс: 

export class Thing {
    id:number;
    name: string;
    link: string;
    liked: boolean;
}

База данных (веб-API в памяти): 

    createDb() {
        const things = [{
            id: 1,
            name: "Ian",
            link:"http://1",
            liked:false
        },
            ...
    ];
        return {things};
    }

шаблон: 

<ul>
  <li *ngFor="let thing of things">
      <p>id:{{thing.id}}</p>
      <p>name: {{thing.name}}</p>
      <p>link: {{thing.link}}</p>
      <label>
         <p>{{thing.liked}}</p>
         <input ([ngModel])="thing.liked" type="checkbox" data="toggle" (change)=onLike(thing)>
  </label>
  </li>
</ul>

things.component: 

import { Component, Input, OnInit } from '@angular/core';
import { Thing } from '../thing';
import { ThingService } from '../thing.service';

@Component({
  selector: 'app-thing',
  templateUrl: './thing.component.html',
  styleUrls: ['./thing.component.css']
})
export class ThingComponent implements OnInit {

  things: Thing[];
  @Input() thing: Thing;

  constructor(private thingService: ThingService) { }

  getThings(): void {
    this.thingService.getThings()
        .subscribe(things => this.things = things);
  }

  onLike(x): void{
    x.liked = !x.liked;
    this.thingService.saveThing(x).subscribe(things => this.things = things);
  }

  ngOnInit() {
    this.getThings();
  }

}

Метод thingService: 

saveThing(thing: Thing): Observable<any>{
    return this.http.put(this.thingsUrl, thing, httpOptions)
  }

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

UPD:

Я добавил метод getThings (), вызываемый при смене флажка 

  onLike(x): void{
    x.liked = !x.liked;
    this.thingService.saveThing(x).subscribe(things => this.things = things);
    this.getThings();
  }

Но я хочу это значениеоставаться в новом состоянии при обновлении страницы.Это не

1 Ответ

0 голосов
/ 18 октября 2018

Это потому, что вы используете in-memory-web-api, он не сохраняет данные, createDb снова запустится и ngOnInit снова запустится.При использовании реального веб-API он будет извлекать данные, хранящиеся в базе данных, так как ngOnInit будет запускаться при обновлении страницы.Если вы хотите сохранить данные при обновлении, вам нужно сохранить их в локальном хранилище или в реальной базе данных

...