Javascript 如何让角度前端等待快速REST呼叫响应

我想在初始化我的用户组件时进行REST调用，以便在加载时显示userprofile。这很好，组件调用服务，该服务调用我的express后端，该后端调用REST-API，返回userprofile。然后前端得到更新

但是，我得到了一个javascript错误，因为在发送数据之前，前端尝试在user components html模板中使用user.id before：

UserComponent.html:2 ERROR TypeError: Cannot read property 'id' of undefined
    at Object.eval [as updateRenderer] (UserComponent.html:2)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:20458)
    at checkAndUpdateView (core.js:19833)
    at callViewAction (core.js:20069)
    at execComponentViewsAction (core.js:20011)
    at checkAndUpdateView (core.js:19834)
    at callViewAction (core.js:20069)
    at execComponentViewsAction (core.js:20011)
    at checkAndUpdateView (core.js:19834)
    at callViewAction (core.js:20069)

我试图通过添加我希望在用户加载时使用的默认值来避免这种行为 这是我的HTML：

id:{{user.id？user.id:''}}
名称：{{user.firstName？user.firstName:'}}{{user.lastName？user.lastName:'}}
邮件：{{user.email？user.email:'}}

这是component.ts

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  user: User;

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.getUser().subscribe(user => {
      console.log('myUser: ' + JSON.stringify(user));
      this.user = user;
    });
  }

}

服务台

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError, tap } from 'rxjs/operators';

import { User } from '../classes/user';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {  }

  getUser(): Observable<User> {
    return this.http.get<any>('/api/userprofile');
  }
}

---

提前谢谢

在

ul

元素上放置*ngIf=“user”。或者在html中的每个

用户

之后打问号

id:{{user？.id}

在

ul

元素上放置*ngIf=“user”。或者在html中的每个

用户

之后打问号

id:{{user？.id}

检查

user

数组的长度

<ul *ngIf="user.length >0">
  <li>id: {{user.id ? user.id : ''}}</li>
  <li>name: {{user.firstName ? user.firstName : ''}} {{user.lastName ? user.lastName : ''}}</li>
  <li>mail: {{user.email ? user.email : ''}}</li>
</ul>

id:{{user.id？user.id:''}}
名称：{{user.firstName？user.firstName:'}}{{user.lastName？user.lastName:'}}
邮件：{{user.email？user.email:'}}

通过检查

user

数组的长度来尝试

<ul *ngIf="user.length >0">
  <li>id: {{user.id ? user.id : ''}}</li>
  <li>name: {{user.firstName ? user.firstName : ''}} {{user.lastName ? user.lastName : ''}}</li>
  <li>mail: {{user.email ? user.email : ''}}</li>
</ul>

id:{{user.id？user.id:''}}
名称：{{user.firstName？user.firstName:'}}{{user.lastName？user.lastName:'}}
邮件：{{user.email？user.email:'}}

id:{{user.id？user.id:''}}
名称：{{user.firstName？user.firstName:'}}{{user.lastName？user.lastName:'}}
邮件：{{user.email？user.email:'}}

您可以在ngOnInit中调用函数，如下所示

ngOnInit（）{
this.userService.getUser（）.subscribe（用户=>{
log（'myUser:'+JSON.stringify（user））；
this.assignUser（this.user）；
});
}
//用于分配用户值的函数
分配用户（用户）{
this.user=user；
}

id:{{user.id？user.id:''}}
名称：{{user.firstName？user.firstName:'}}{{user.lastName？user.lastName:'}}
邮件：{{user.email？user.email:'}}

您可以在ngOnInit中调用函数，如下所示

ngOnInit（）{
this.userService.getUser（）.subscribe（用户=>{
log（'myUser:'+JSON.stringify（user））；
this.assignUser（this.user）；
});
}
//用于分配用户值的函数
分配用户（用户）{
this.user=user；
}

尝试使用以下html片段：

<ul>
  <li>id: {{user?.id}}</li>
  <li>name: {{user?.firstName}} {{user?.lastName}}</li>
  <li>mail: {{user?.email}}</li>
</ul>

id:{{user？.id}
名称：{{user？.firstName}{{user？.lastName}}
邮件：{{user？.email}

或

id:{{user.id？user.id:''}}
名称：{{user.firstName？user.firstName:'}}{{user.lastName？user.lastName:'}}
邮件：{{user.email？user.email:'}}

尝试使用以下html片段：

<ul>
  <li>id: {{user?.id}}</li>
  <li>name: {{user?.firstName}} {{user?.lastName}}</li>
  <li>mail: {{user?.email}}</li>
</ul>

id:{{user？.id}
名称：{{user？.firstName}{{user？.lastName}}
邮件：{{user？.email}

或

id:{{user.id？user.id:''}}
名称：{{user.firstName？user.firstName:'}}{{user.lastName？user.lastName:'}}
邮件：{{user.email？user.email:'}}

只要在ngIf中检查用户对象就足够了。谢谢！只要在ngIf中检查用户对象就足够了。谢谢！谢谢，这也行。有什么理由我应该检查长度而不是仅仅检查用户对象本身吗？谢谢，这也很有效。有什么理由我应该检查长度而不是仅仅检查用户对象本身吗？