Angular HttpClient 订阅无法读取未定义的属性“名称”

Question

我有以下组件和服务：
组件

@Component({
  selector: 'app-root',
  template: '{{user.name}}',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  user: User;

  constructor(private userService: UserService) {
    this.userService.get().subscribe(user => {
      this.user = user;
    });
  }

}

服务

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

  get(): Observable<User> {
    return this.http.get<User>('http://www.mocky.io/v2/5cc0af9a310000440a0364b6');
  }
}

用户

export class User {
  constructor(
    public name: string
  ) {
  }
}

如您所见，我只是想打印用户名。它可以工作，但在打印值之前，我多次收到Cannot read property 'name' of undefined 错误。
我知道原因——我异步加载用户，但是如何处理呢？
我找到了保险箱操作员：

{{user?.name}}

而且它有效。但在我的实际项目中，这种方法并不适用于任何地方。
我也尝试使用 ngIf:

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

但这会破坏我应用程序的另一部分。
有没有办法在 HTTP 调用之后渲染组件 ，这样我就不必使用 Safe Operator 或 ngIf？如果没有，那么您使用什么方法？你如何处理这个问题？

Answer 1

您不需要为这种情况创建 DTO：

  get(): any{
return this.http.get<User>('http://www.mocky.io/v2/5cc0af9a310000440a0364b6');

}

Answer 2

如果您的意思是在模板中引入另一个额外的 div 会破坏 CSS，您可以使用 ng-container 元素并在其中添加 *ngIf

<ng-container *ngIf="user">{{user}}</ng-container>

根据定义

Angular 是一个分组元素，它不 干扰样式或布局，因为 Angular 没有将其放入 DOM。

Answer 3

您的代码看起来正确，将您的用户类更改为界面：

export interface User {
  name: string;
}

或者如果你想使用这个类，把它改成：

export class User {
  name: string;
}

你当前的代码：

export class User {
  constructor( public name: string) {
  }
}

意味着只有在调用构造函数时才会创建属性，并且只会在您尝试使用 new 创建对象时调用：

user = new User();

Answer 4

您可以通过创建默认的User 对象来阻止它

export class AppComponent {

  user = new User('');

}