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

Question

使用简单的获取方法从 MySql 获取数据在浏览器 URL 每次更新时都能正常工作。添加一些新行后，即使在控制台上也无法使用 subscribe 和 observable 获取新数据。它 returns 旧数据集。如果我调用 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.produkt 在调用 this.apiService.readProdukts().subscribe(... 对于你们中的许多人来说，它应该看起来像是重复的。我的意思是在 HTML 上更新整个 table 不起作用。尝试几次后它会起作用，但我不知道是什么触发了它。我的问题不是更新单个 SQL table 行。我已经尝试过许多类似的问题，但未能找到适合我的解决方案。提前致谢

Answer 1

我看到您正在传递选定的产品，但您实际上并没有在数据处理后设置它的 ID，这就是为什么您稍后无法更新，而是您的函数将再次插入的原因。

我会建议您在 insert/update return 生成密钥后将其设置为您选择的产品，以便下次您调用 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

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

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

Angular http GET request after CREATE method does not update Dataset (Whole Table)

mysql

httpclient

angular

angular7