问题描述: 在使用Angular 6进行POST请求后,视图没有更新。
解决方法:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-my-component',
template: `
Posts
- {{ post.title }}
`
})
export class MyComponent {
posts: any[];
constructor(private http: HttpClient) {}
ngOnInit() {
this.getPosts();
}
getPosts() {
this.http.get('https://jsonplaceholder.typicode.com/posts')
.subscribe(posts => {
this.posts = posts;
});
}
createPost() {
const postData = { title: 'New Post' };
this.http.post('https://jsonplaceholder.typicode.com/posts', postData)
.subscribe(() => {
this.getPosts(); // 更新视图
});
}
}
在这个例子中,我们首先通过GET请求获取了一些post数据,然后在视图中展示它们。当点击“Create Post”按钮时,会发送一个POST请求来创建新的post。在POST请求的回调函数中,我们再次调用了getPosts()方法来更新视图。
确保在服务端成功创建了新的post。可以使用开发者工具或其他网络调试工具来检查POST请求的返回结果,确保服务端正确处理了请求,并返回了正确的响应。
如果服务端成功创建了新的post,但视图仍然没有更新,那么可能是由于Angular的变更检测机制导致的。可以尝试在代码中手动触发变更检测。示例代码如下:
import { Component, ChangeDetectorRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-my-component',
template: `
Posts
- {{ post.title }}
`
})
export class MyComponent {
posts: any[];
constructor(private http: HttpClient, private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.getPosts();
}
getPosts() {
this.http.get('https://jsonplaceholder.typicode.com/posts')
.subscribe(posts => {
this.posts = posts;
this.cdr.detectChanges(); // 手动触发变更检测
});
}
createPost() {
const postData = { title: 'New Post' };
this.http.post('https://jsonplaceholder.typicode.com/posts', postData)
.subscribe(() => {
this.getPosts();
});
}
}
在这个例子中,我们注入了ChangeDetectorRef服务,并在getPosts()方法中调用detectChanges()方法来手动触发变更检测。
通过以上方法,你应该能够解决Angular 6在POST后未更新视图的问题。