在Angular 7中,如果模型与JSON不一致,可以使用map
操作符来映射数据进行订阅可观察对象的方法。下面是一个示例:
首先,假设我们有一个接口User
,定义了用户的属性:
interface User {
id: number;
name: string;
email: string;
}
然后,我们从服务器获取到的JSON数据可能与模型不一致,比如属性名可能不同:
{
"user_id": 1,
"username": "John Doe",
"user_email": "john@example.com"
}
在服务中,我们可以使用map
操作符来映射数据:
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable()
export class UserService {
constructor(private http: HttpClient) {}
getUser(): Observable {
return this.http.get('api/user').pipe(
map(response => {
return {
id: response.user_id,
name: response.username,
email: response.user_email
};
})
);
}
}
在组件中,我们可以订阅getUser
方法返回的可观察对象,并在回调函数中处理数据:
export class UserComponent implements OnInit {
user: User;
constructor(private userService: UserService) {}
ngOnInit() {
this.userService.getUser().subscribe(user => {
this.user = user;
});
}
}
这样,我们就可以正确地映射数据进行订阅可观察对象的方法。注意,在map
操作符中,我们将服务器返回的JSON数据映射到我们定义的模型User
中的属性上。