Как инициализировать интерфейс, содержащий другие интерфейсы, из компонента в Angular

#angular #typescript

Вопрос:

Я звоню в firebase с помощью службы, которая возвращает json, который я смоделировал в интерфейсе, чтобы иметь возможность доступа к его данным, интерфейс выглядит следующим образом:

 export interface Restaurante {
  footer: Footer;
  logo: string;
  section_1: Section1;
  section_2: Section2;
  slide_header: Slide[];
}

export interface Footer {
  contacto: Contacto;
  logo_footer: string;
  redes: Redes;
}

export interface Contacto {
  direccion: string;
  mail: string;
  telefono: string;
}

export interface Redes {
  facebook: string;
  instagram: string;
}

export interface Section1 {
  slide_promo: Slide[];
}

export interface Slide {
  img: string;
}

export interface Section2 {
  type_menu: TypeMenu[];
}

export interface TypeMenu {
  menu: Menu[];
  type: string;
}

export interface Menu {
  description: string;
  img: string;
  price: string;
  title: string;
}
 

Мне удалось получить доступ к интерфейсу, полностью инициализированному для интерфейса контактов, но моя проблема возникает, когда мне нужно получить доступ к данным, которые поступают из нижнего колонтитула, который находится внутри другого интерфейса и, в свою очередь, содержит другие интерфейсы.

 datos: Contacto = {
    direccion: 'string',
    mail: 'string',
    telefono: 'string',
  }; 
  constructor(private firebase: FirebaseService) {
    this.firebase.datosHeader().subscribe(
      (datos) => {
        this.datos = datos.footer.contacto;
      },
      (err) => {}
    );
    console.log(this.datos);
  }
 

Когда я делаю это следующим образом, это приводит к ошибке, поэтому я хотел бы знать, как я могу получить доступ к информации, содержащейся в нижнем колонтитуле.

 datos!: Footer;
  /* datos: Contacto = {
    direccion: 'string',
    mail: 'string',
    telefono: 'string',
  };  */
  constructor(private firebase: FirebaseService) {
    this.firebase.datosHeader().subscribe(
      (datos) => {
        this.datos = datos.footer;
      },
      (err) => {}
    );
    console.log(this.datos);
  }