Обновление компонента CRUD в Angular без сохранения данных - PullRequest
Новая
       7

Обновление компонента CRUD в Angular без сохранения данных

0 голосов
/ 29 ноября 2018

Вот мой компонент обновления: 

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-update-person',
  templateUrl: './update-person.component.html',
  styleUrls: ['./update-person.component.css']
})
export class UpdatePersonComponent implements OnInit {
  id: number;
  data: object = {};
  // person = []; //ERROR TypeError: Cannot read property 'length' of undefined
  // person = any; //ERROR Error: Uncaught (in promise): ReferenceError: any is not defined
  person: any; //ERROR TypeError: Cannot read property 'length' of undefined
  exist = false;
  personObj: object = {};
  private headers = new Headers({ 'Content-Type': 'application/json' });

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private http: HttpClient
  ) {}
  confirmationString: string = 'Person updated successfully !!';
  isUpdated: boolean = false;

  updatePerson = function(person) {
    this.personObj = {
      p_id: person.p_id,
      p_username: person.p_username,
      p_image: person.p_image
    };
    const url = `${'http://localhost:5555/person'}/${this.id}`;
    this.http
      .put(url, JSON.stringify(this.personObj), { headers: this.headers })
      .toPromise()
      .then(() => {
        this.router.navigate(['/']);
      });
  };
  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = +params['id'];
    });
    this.http
      .get('http://localhost:5555/person')
      .subscribe((res: Response) => {
        this.isUpdated = true;
        this.person = res;
        for (var i = 0; i < this.person.length; i++) {
          if (parseInt(this.person[i].id) === this.id) {
            this.exist = true;
            this.data = this.person[i];
            break;
          } else {
            this.exist = false;
          }
        }
      });
  }
}

Это работает без каких-либо ошибок.Однако после нажатия кнопки обновления пустые данные сохраняются на моем сервере json.

Похоже, проблема в person: any;.Вы можете увидеть пару других вещей, которые я пробовал с этой переменной человека и соответствующей ошибкой, которую я получаю.

1 Ответ

0 голосов
/ 29 ноября 2018

Обычно рекомендуется вводить код доступа к данным в службу, а не в компонент.

Обычно я использую почту для создания новых данных и для обновления существующих данных.

MyМетод обновления (в моей службе доступа к данным) выглядит следующим образом: 

  updateProduct(product: Product): Observable<Product> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    const url = `${this.productsUrl}/${product.id}`;
    return this.http.put<Product>(url, product, { headers: headers })
      .pipe(
        tap(() => console.log('updateProduct: ' + product.id)),
        // Return the product on an update
        map(() => product),
        catchError(this.handleError)
      );
  }

Обратите внимание, что я не строжайше передаваемых данных.Также я не преобразовываю результат в обещание.

Относительно вашего кода:

1) Рассмотрите возможность перемещения кода доступа к данным в службу.

2) Где вы используетеUpdatePerson функция?(Где он вызывается?)

3) При создании функции с использованием ключевого слова function вместо функции стрелки =>, this становится ограниченным для функции, и вы фактически не получаете доступуровень класса personObj

4) Мне неясно, нужно ли person и personObj?

Если вам нужен рабочий пример кода с помощью create, updateи операции удаления, вы можете найти пример здесь: https://github.com/DeborahK/Angular-ReactiveForms/tree/master/APM

Вы можете увидеть / выполнить его в stackblitz здесь: https://stackblitz.com/edit/deborahk-crud

...