Angular-填充的服务对象返回null

Question

我正在使用Angular 5和ionic 3，我想要做的是在响应端点之后填充一个对象，如下所示：

user.service.ts

public UserInfo: UserData = {
    id: null,
    username: null,
    email: null,
    subscribeData: null,
    brand: null,
    fiscalcode: null,
};

populateBaseUserInfo(user) {
    this.UserInfo.id = user._id;
    this.UserInfo.username = user.username;
    this.UserInfo.subscribeData = user.subscribeData;
    this.UserInfo.email = user.email;
    console.log(JSON.stringify(this.UserInfo));
} 

console.log中的响应正常：

但是当我尝试将对象放入组件中时，该对象将所有字段都返回为null ...

user.component.ts

import { UserService } from '../../service/user.service';
@Component({
 providers: [UserService]
})
export class MainPage {
   public localUser: UserData;

   constructor(private UserService : UserService, ) {
       this.localUser = this.UserService.UserInfo;
   }
)

user.html

{{localUser | json}}

那么，我在做什么错？要从响应中看到组件中的对象json，需要做些什么？

谢谢

Answer 1

我认为问题在于，由于您只是在更改对象中的属性而未触发更改检测，因此我敢肯定，如果不是返回服务对象的引用而不是返回引用，则一切正常（例如，使UserInfo成为返回该对象的lodash克隆的getter），即使解决了您的问题，这也不是正确的解决方案。如果每次调用populateBasicUserInfo时都创建一个具有所需信息的新对象而不是替换属性会更好。就像我说的那样，由于您更改了引用，它将运行检测。

Answer 2

我解决了，主要问题是由于角度（5）的版本，“ userInfo”未被识别为单例，因此我无法在服务的可注入项中使用providein:root参数，因此这就是我所做的：

-在app.module内部移动服务提供者，并从组件中删除

-将Behaviorsubject rxjs用作服务中的内容：

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  public UserInfo = new BehaviorSubject<any>({
    _id : null,
    username : null,
    email : null,
    data : null,
    brand : null,
    fiscalcode : null
});
user = this.UserInfo.asObservable();

populateBaseUserInfo(user : any){
    this.UserInfo.next(user)
    console.log(JSON.stringify(this.UserInfo));
}; 

这里是我称之为“ populateBaseUserinfo”的代码组件

this.UtentiService.populateBaseUserInfo( this.risposta );

和这里的另一个组件，我称之为可观察范围内的更新信息：

   this.UtentiService.user.subscribe(user =>{
    this.localUser = user;
   })