Angular 7 отображает базу данных UserInfo на пользовательскую модель

Question

Я новичок в angular 7, я пытаюсь получить текущего аутентифицированного пользователя из firebase и сопоставить его со своей собственной моделью User (без конструктора в User).

В API Firebase:

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

После того, как вопрос был отредактирован

Я все еще рекомендую ответ "до того, как вопрос был отредактирован", но для ответа на вопрос:

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

Этот ответ содержит более подробную информацию.

Answer 2

Согласно 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
    }));
  }

}