在我刷新页面之前，角度不显示创建的对象

Question

请帮忙，我有一个消息服务，它从数据库中获取我的消息并将它们显示在用户个人资料页面上。创建或删除消息时，只有刷新浏览器才能看到更改。

在我应用过滤器以按 Id 排序之前，页面会动态更新，为什么过滤器会取消绑定我的消息数组？

配置文件组件：

    export class ProfileComponent implements OnInit {

    user: User;
    userId: any;
    messages: any;  

    constructor(private authService: AuthService, private messageService: MessageService) {}

    ngOnInit() {
      this.authService.getUser().subscribe(
        (user: User) => {
        this.user = user;
        this.userId = user.userId;
        }
      );
       this.messageService.getMessages()
      .subscribe(
          (messages: Message[]) => {
            this.messages = messages.filter(x => x.userId == this.userId);
            //this.messages = messages; //this works perfect, but shows all users messages
          }
      );
    }
}

Answer 1

似乎您的第一个 API 调用（getUser 方法）需要更多时间，它在 getMessages 方法之后完成。 你应该以某种方式让他们依赖。您可以使用toPromise 方法将getUser Observable 转换为promise。

ngOnInit() {
  this.authService.getUser()
  .toPromise()
  .then(
     (user: User) => {
        this.user = user;
        this.userId = user.userId;
     }
  )
  .then(() => {
      this.messageService.getMessages()
      .subscribe(
         (messages: Message[]) => {
            this.messages = messages.filter(x => x.userId == this.userId);
         }
      );
  });
}

Answer 2

将您的代码更改为：

messages: Array<any> = [];  
this.authService.getUser().subscribe(
        (user: User) => {
        this.user = user;
        this.userId = user.userId;
        this.messageService.getMessages()
              .subscribe(
                  (messages: Message[]) => {
                    this.messages = messages.filter(x => x.userId === this.userId);
                    //this.messages = messages; //this works perfect, but shows all users messages
                  }
              );
        }
      );

你只需要嵌套其他 observables ，所以它会在第一次调用完成后被调用。