CREATE 方法后的 Angular http GET 请求不更新数据集（整表）

Question

每次更新时，通过简单的 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(... 对于你们中的许多人来说，它应该看起来像一个重复。我的意思是在 HTML 上更新整个表格不起作用。几次尝试后它确实如此，但我不知道是什么触发了它。我的问题不是更新单个 SQL 表行。我已经尝试了许多类似的问题，但无法找到适合我的解决方案。 提前致谢

Answer 1

我看到您正在传递选定的产品，但在处理数据后您实际上并未设置其 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);

    });
  }

Answer 2

添加适当的缓存处理后，缓存是问题，我能够刷新数据。