Question

您好我想知道如何整理代码：

我有一个简单的用户界面：

export interface User {
Account: string;
Name: string;
EMail: string;
PictureURL: string;
Department: string;
JobTitle: string;
Initials: string;
Skype: string;
Office: string;
MobileNumber: string;
DirectLine: string;
IsChecked: boolean;
IsIDTitleOnly: boolean;
ID: string;
CreatedAt: string;
CreatedBy: this;
ModifiedAt: string;
ModifiedBy: this;}

我有一项简单的服务来获取我的数据：

  getCurrentUser(): Observable<User> {
const serviceUrl: string = environment.apiUrl + 'Users/Current';

return this.http.get(serviceUrl)
.map((res: User) => {
  return res;
});}

最后是一个简单的组件：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { User } from '../../interfaces/user';
import { UserService } from '../../services/user.service';

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


  constructor(
    private userService: UserService
  ) { }

  ngOnInit() {
    this.getCurrentUser()
  }

  getCurrentUser() {
    this
      .userService
      .getCurrentUser()
      .subscribe(
     res => { console.log(res); this.user = res },
     err => { console.log(err); }
  )
  }
}

如果我总是创建一个类或接口，我的用户没有类或构造函数吗？

当我显示“user.Name”时，我有一个错误：“无法读取未定义的属性'名称'，因为用户没有时间恢复数据。

我真的想知道如何正确初始化我的用户，并知道我是否需要课程（如果有一天我必须创建一个新用户）。

非常感谢提前

Answer 1

最好有一个描述该对象的接口或类（形状）。这是Typescript让我们在其关卡中严格键入代码的主要功能之一。

undefined error怎么样，您可以在标记中显示时检查您的字段。只需在字段?之后添加user?.Name标记即可。

Answer 2

在你的html中使用*ngIf，如下所示：

<div *ngIf='user'> {{user.Name}}</div>

这会阻止“无法读取属性'名称'未定义”错误

Angular 4+ httpClient使用服务的最佳实践

2 个答案: