Получение персон c сервера. Получение персон c сервера. angular person ajax

Получение персон c сервера.

Open in new window

Делаем запрос на сервер в компоненте списка.

import { HttpClient } from '@angular/common/http'
import { API_URL } from '../global';

constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getPersonList();
  }

  getPersonList() {
    return this.http.get(API_URL+'api/persons?limit=10&offset=0').subscribe(res =>{
      this.persons = res.results;
    });
  }

Запрос на сохранение персоны.

  onSubmit(){
    this.submitted = true;
    this.savePerson(this.person);
  }

 savePerson(person: Person) {
    return this.http.put(API_URL+'api/persons/'+person.id+'/',person).subscribe(res =>{
    },() => {alert('Error')});
  }

Запрос на создание персоны.

 savePerson(person: Person) {
    if(person.id === undefined){
      return this.http.post(API_URL+'api/persons/',person).subscribe(res =>{
      },() => {alert('Error')});
    } else {
      return this.http.put(API_URL+'api/persons/'+person.id+'/',person).subscribe(res =>{
      },() => {alert('Error')});
    }

  }

Очистка формы.

  <div class="col-sm-4">
    <button class="btn btn-primary mb-2" [disabled]="!personForm.form.valid">Submit</button> &nbsp;
    <a class="btn btn-warning mb-2" (click)="clear()">Очистить</a>
  </div>

  clear() {
    this.person = new Person();
  }

Событие создания персоны для подписки в сестринских компонентах.

Для этого вынесем запросы на создание в отдельный сервис person/form/service.ts

import {BehaviorSubject} from "rxjs/Rx";
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { API_URL } from '../../global';
import { AlertService } from '../../directives/alert.service';
import { Person } from '../model';

@Injectable()
export class PersonService {
  private _emmiter = new BehaviorSubject(null);
  subscriber$ = this._emmiter.asObservable();
  constructor(private http: HttpClient,private alert: AlertService) {}
  doSavePerson(person: Person) {
    if(person.id === undefined){
      return this.http.post(API_URL+'api/persons/',person).subscribe(res =>{
        this.alert.success('Персона создана.');
        this._emmiter.next('created');
      },() => {alert('Error')});
    } else {
      return this.http.put(API_URL+'api/persons/'+person.id+'/',person).subscribe(res =>{
        this.alert.success('Персона сохранена.');
      },() => {alert('Error')});
    }

  }

}

Использование сервиса в компоненте формы.

import { PersonService } from './service';

...

constructor(private http: PersonService) {}

...

savePerson(person: Person) {
    this.http.doSavePerson(person);
}

Подписываемся на событие сохранения из компонента списка.

import { PersonService } from '../form/service';

constructor(private http: HttpClient,private ps: PersonService) { }

ngOnInit() {
    this.getPersonList(this.offset);
    this.ps.subscriber$.subscribe(() => {
      this.getPersonList(this.offset);
    });
}

Other topics