Угловой HTTP-запрос GET после метода CREATE не обновляет набор данных (вся таблица) - PullRequest
Новая
       23

Угловой HTTP-запрос GET после метода CREATE не обновляет набор данных (вся таблица)

0 голосов
/ 04 июля 2019

Получение данных из MySql с помощью простых методов get прекрасно работает с URL-адресом браузера при каждом обновлении.После добавления новой строки получение новых данных с подпиской и наблюдаемым не работает даже на консоли.Возвращает старый набор данных.Если я вызываю скрипт 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 неработает. Это происходит после нескольких попыток, и я не понимаю, что это вызывает. Моя проблема не в обновлении одной строки таблицы SQL. Я пробовал много похожих вопросов, но не смог найти решение, которое работает для меня.enter image description here Заранее спасибо

Ответы [ 2 ]

1 голос
/ 04 июля 2019

Я видел, что вы передаете выбранный продукт, но вы на самом деле не устанавливаете его 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);

    });
  }
0 голосов
/ 20 июля 2019

Кеш был проблемой после добавления правильной обработки кеша, я смог обновить данные.

...