mysql - CREATE 方法后的 Angular http GET 请求不更新数据集(整表)
问题描述
每次更新时,使用简单的 get 方法从 MySql 获取数据在浏览器 URL 上都可以正常工作。添加一些新行后,即使在控制台上也无法使用 subscribe 和 observable 获取新数据。它返回旧数据集。如果我调用 php 脚本,它会给我当前添加的行,但在视图中它不会更新。
基本上我的代码来自本教程:https ://www.techiediaries.com/php-angular-crud-api-httpclient-forms/ 。我可以毫无问题地添加删除数据。在某些浏览器上阅读它似乎很困难(或多或少全部)。只有在 Edge 上,它才能在页面刷新后工作并更新数据。
这是我的服务:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Produkt } from './../app/produkt';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
PHP_API_SERVER = "http://*********.com";
constructor(private httpClient: HttpClient) {}
public readProdukts(): Observable<Produkt[]>{
return this.httpClient.get<Produkt[]>(`${this.PHP_API_SERVER}/read.php`);
}
public createProdukt(produkt: Produkt): Observable<Produkt>{
let tmp = JSON.stringify(produkt);
return this.httpClient.post<Produkt>(`${this.PHP_API_SERVER}/create.php`, produkt);
}
...
}
以及我称之为读取服务的组件之一:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../../../shared/data.service'
import { Produkt } from 'src/app/produkt';
@Component({
selector: 'app-inventar',
templateUrl: './inventar.component.html',
styleUrls: ['./inventar.component.scss']
})
export class InventarComponent implements OnInit {
produkt: Produkt[];
selectedProdukt: Produkt = {
id : null ,
emri: null,
kosto: null,
referenza: null,
corigjine: null,
cpakice: null,
cshumice: null,
kondenieri: null,
data: null,
ambienti: null,
ngjyra: null,
materiali: null,
sasia: null,
llojik: null,
kursi: null
};
constructor(private apiService: DataService) {
}
ngOnInit() {
}
readDB(){
this.apiService.readProdukts().subscribe((prod: Produkt[])=>{
this.produkt = prod;
console.log(this.produkt);
})
}
createOrUpdateProdukt(form){
if(!this.checkIfEmpty()){
if(this.selectedProdukt && this.selectedProdukt.id){
form.value.id = this.selectedProdukt.id;
this.apiService.updateProdukt(form.value).subscribe((prod: Produkt)=>{
this.readDB();
console.log("Product updated" , prod);
});
}
else{
form.value.id = null;
this.apiService.createProdukt(form.value).subscribe((prod: Produkt)=>{
this.readDB();
console.log("Productcreated, ", prod);
});
}
alert("Added");
}else{
alert("Fill the form");
}
}
我需要在调用 this.apiService.readProdukts().subscribe(... 之后更新 this.produkt经过几次尝试,我没有得到触发它的原因。我的问题是没有更新单个 SQL 表行。我尝试了许多类似的问题,但无法找到适合我的解决方案。 提前致谢
解决方案
我看到您正在传递选定的产品,但您实际上并没有在处理数据后设置其 Id,这就是为什么您稍后无法更新,而是您的函数将再次插入。
我建议您在插入/更新后返回生成的密钥并将其设置为您选择的产品,以便下次调用 createOrUpdate 方法时它会更新。
结构改进:而不是调用 readDB() 在本地数组中带来有效的插入或更新记录和更新,这也将提高性能。
if(this.selectedProdukt && this.selectedProdukt.id){
form.value.id = this.selectedProdukt.id;
this.apiService.updateProdukt(form.value).subscribe((prod: Produkt)=>{
var item = this.produkt.filter(s=>s.id == prod.id);
Object.assign(item[0], prod);
console.log("Product updated" , prod);
});
}
else{
form.value.id = null;
this.apiService.createProdukt(form.value).subscribe((prod: Produkt)=>{
this.produkt.push(prod);
this.selectedProdukt.id = prod.id;
console.log("Productcreated, ", prod);
});
}
推荐阅读
- unit-testing - 通过包含 `--runInBand` 修复了 Jest 测试的问题,但我对为什么感到困惑
- python - Django /accounts 重置页面个性化
- c# - 如何在一天中的特定时间运行 .net Core IHosted 服务?
- java - Java合并多个replaceAll - 子字符串一次或多次出现
- javascript - 未使用 gwt map api 检测位置
- reactjs - null 不是对象(评估“n.IsAndroid”)
- python - 使用来自 itertools 的部分对 pool.map 进行多处理 2 个以上的参数
- angular - 我的操作没有调用关联的减速器和效果
- r - 在给定 R 中每个变量的可能值的情况下,有效地填充行
- java - @GeneratedValue 不适用于非 id 字段