@kikosko

Почему метод обновления данных не работает?

Я хочу обновить информацию поста в GalleryService с помощью метода "update". Когда я нажимаю кнопку «Edit», я перехожу по адресу выбранного поста, его данные находятся в полях ввода. После того, как я что-то изменил в полях и нажал на кнопку «Update Post», чтобы изменить данные о посте, моя форма закрывается, но никаких изменений не происходит. Ошибок нету, изменения не происходят в базе, все другие методы работают (изменения происходят в базе), в консоле проверял данные что отправляю и айди, все сходиться. Как сервер использую: "json-server". Помогите решить эту проблему и понять что делаю не так

Кнопка редактирования в компоненте GalleryItemComponent:
<a class="btn btn-success ed"  [routerLink] = "['/galleryEdit', pic.id]" >Edit</a>

Форма в GalleryEditComponent:
<form [formGroup]="angFormEd" novalidate>

        <input type="text" class="form-control" formControlName="titleEd"  #titleEd
               [(ngModel)]="post.title"/>

        <input type="url" class="form-control" formControlName="urlEd" #urlEd pattern="https?://.+"
               title="Include http://" [(ngModel)]="post.url"/>
 
        <button (click)="updatePost(titleEd.value, urlEd.value)"  
                [disabled]=" angFormEd.invalid">
                btn btn-primary">Update Post</button>     
    </form>

GalleryEditComponent.ts:
export class GalleryEditComponent implements OnInit {
    post: Picture;
    constructor(private fb: FormBuilder,
                private route: ActivatedRoute, private galleryService: GalleryService) {
    }

    ngOnInit() {
        this.editPost();
    }

    editPost(): void {
        this.route.params.subscribe(params => {
            this.galleryService.edit(params['id']).subscribe(res => {
                this.post = res;
            })
        })
    }

    updatePost(title: string, url: string): void {
        this.route.params.subscribe(params => {
            this.galleryService.update(title, url, params['id']);
        });
    }
}

Сервис:
export class GalleryService {
    galleryUrl: string = 'http://localhost:5555/posts';
    httpOptions: object = {
        headers: new HttpHeaders({'Content-Type': 'application/json'})
    };
    constructor(private http: HttpClient) {
    }

    getPictures(): Observable<Picture[]> {
        return this.http.get<Picture[]>(`${this.galleryUrl}`);
    }

    edit(id:number): Observable<Picture> {
        return this.http.get<Picture>(`${this.galleryUrl}/${id}`);
    }

    update(title: string, url: string, id: number): Observable<Picture> {
        const postEdObj = {
          title,
            url
        };
        console.log(`${this.galleryUrl}/${id}`);
        console.log(postEdObj);
        return this.http.put<Picture>(`${this.galleryUrl}/${id}`, postEdObj, this.httpOptions);
    }
}
  • Вопрос задан
  • 120 просмотров
Пригласить эксперта
Ответы на вопрос 1
Qairat
@Qairat
frontend developer, angular 2+
Вместо этого
put
можешь использовать просто
post или get


И на стороне бэка проверять если есть такой ID, то там update сделать.
А если нет то можешь даже Insert сделать!

Можно через один метод двух зайцев убить.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы