Angular - 显示标签而不等待其值

Question

我的组件显示用户的属性（姓名、电子邮件……）。 我想显示标签而不等待它们的值。我找到了一个解决方案，但我不喜欢它，因为我重复

<span *ngIf="user">

。

通过以下示例我立即显示

name: 
email:
...

5秒后

name:Nicolas 
email:[email protected]
...

user.component.html：

<div>
    name : <span *ngIf="user">{{ user.name }}</span> <br/>
    email : <span *ngIf="user">{{ user.email }}</span> <br/>
    ...
</div>

用户.组件.ts

export class UserComponent {
  user?: User;

  constructor(private userService: UserapiService) { }

  ngOnInit() {
    // getUser1() calls an API and lasts 5s for example
    this.userService.getUser1().subscribe(user1 => this.user = user1);
  }
}

我不想要下面的代码，因为5秒后就会显示完整的内容

<div *ngIf="user">
    name : {{ user.name }} <br/>
    email : {{ user.email }}<br/>
    ...
</div>

无需等待其值即可显示标签的最佳解决方案是什么？

感谢您的帮助， 尼古拉斯

Answer 1

使用安全导航操作符 (?.)： 此运算符允许您访问可能为 null 或未定义的对象的属性，而不会导致错误。

<div>
  name: {{ user?.name }} <br/>
  email: {{ user?.email }} <br/>
  ...
</div>