Angular 6:更改对象的属性并将其保存到数据库(内存中Web API)

Question

我有一个类：

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

数据库(内存中 Web 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>

事物组件：

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

事物服务方式：

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

当我单击复选框时，我希望"liked"属性更改其值(确实如此(，并且对象"事物"将使用此新值"liked"保存到数据库中(而不是那个 - 更改"喜欢"值后，整个列表都消失了(。问题出在哪里？

上级：

我添加了在更改复选框时调用的 getThings(( 方法

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

但是我希望此值在刷新页面时保持新状态。它没有

Answer 1

这是因为您使用的是内存中 web-api，它不会持久化数据，createDb 将再次运行，ngOnInit 将再次运行。如果使用真正的Web api，它将获取存储在数据库中的数据，因为ngOnInit将在页面刷新时运行。如果要在刷新时保留数据，则需要将其存储在本地存储或真实数据库中