Question

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

$(oCharts).each(function(i,v){
  var myChart = this.nchart;
  var makeChart = this.fchart;


    self[myChart].destroy();
    self[makeChart]()


  }
);

服务

@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

它有效。但是在我的真实项目中，这种方法并不适用于所有地方。
我也尝试使用ngIf：

{{user?.name}}

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

Answer 1

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

export class AppComponent {

  user = new User('');

}

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) {
  }
}

仅在调用构造函数时才会创建Means属性，并且仅当您尝试使用new创建对象时才会调用该属性：

user = new User();

Answer 4

在这种情况下，您无需创建DTO：

select

}

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

4 个答案: