0

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);
    }
}

4

0 回答 0