メソッドGalleryService
を使用して投稿に関する情報を更新したい。update
ボタンをクリックするEdit
と、選択した投稿のアドレスに移動します。そのデータは入力フィールドにあります。フィールドで何かを変更し、Update Post
ボタンをクリックして投稿を変更した後、フォームは閉じますが、変更は行われません。エラーもありません。私の問題が何であるかを教えて、それを解決してください。
Edit
コンポーネントのボタンGalleryItemComponent
:
<a class="btn btn-success ed" [routerLink] = "['/galleryEdit', pic.id]" (click)="editPost(pic)">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']);
});
}
}
** GalleryService.ts
:**
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
};
export class GalleryService {
galleryUrl: string = 'http://localhost:5555/posts';
Mycollection: Picture[] = myCollection;
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
};
return this.http.put<Picture>(`${this.galleryUrl}/${id}`, postEdObj, httpOptions);
}
}