Question

我对angular 7不熟悉，我试图从firebase中获取当前经过身份验证的用户并映射到我自己的User模型（User中没有构造函数）。

在firebase API中：

interface UserInfo {
  displayName: string | null;
  email: string | null;
  phoneNumber: string | null;
  photoURL: string | null;
  providerId: string;
  uid: string;
}

在我自己的模型中：

export class User{
  name: string;
  email: string;
  contactNo: string;
}

我的UserService

@Injectable()
export class UserService {

  constructor(
    private fireAuth: AngularFireAuth, 
  ) {}

  getAuthUser(): Observable<User> {

    // this part is not working, how to map to User without changing User constructor?
    return this.fireAuth.authState.map(authData => new User({name: authData.displayName}));

  }

}

Answer 1

根据Angular Style Guide：

考虑将接口用于数据模型。

话虽如此，如果您愿意遵循该样式指南，则可以执行以下操作：

使用可选字段创建User interface：

export interface User{
  name?: string;
  email?: string;
  contactNo?: string;
}

在您的服务中，您只需执行以下操作即可：

@Injectable()
export class UserService {

  constructor(
    private fireAuth: AngularFireAuth,
  ) {}

  getAuthUser(): Observable<User> {
    return this.fireAuth.authState.map(authData => ({
      name: authData.displayName
    }));
  }

}

Answer 2

问题编辑后

我仍然建议“在问题被编辑之前”回答，但要回答问题：

new User({name: authData.displayName})在不调整构造函数的情况下无法工作。在您的情况下，类具有默认构造函数User()，该构造函数不接受任何参数。如果您必须或想使用类而不是接口（如下所示），那么应该可以使用一些解决方法。

粗略的例子：

// object "as"
authData => <User>{name: authData.displayName, ... other props}

// object "as" 2
authData => {name: authData.displayName, ... other props} as User

// new user, return after changing props
authData => {
    const user = new User();
    user.name = authData.displayName;
    // ...the rest
    return user;
}

// "builder" method (basically a constructor)
function buildUser(name: string, ...other props) {
    const user = new User();
    user.name = authData.displayName;
    // ...the rest
    return user;
}

问题编辑之前 如果您不想使用构造函数，而该类只是一个没有额外方法的模型，建议您使用一个接口。

// interface
export interface User {
  name: string;
  email: string;
  contactNo: string;
}

// inside map
authData => {name: authData.displayName, ...<other props>}

// inside map with type checking 1
authData => <User>{name: authData.displayName, ...<other props>}

This answer有更多详细信息。

Angular 7将Firebase UserInfo映射到自定义用户模型

2 个答案: