Angular 6: невозможно привязать данные API к var в клиенте

Question

У меня проблемы с привязкой запрошенных api-данных к переменной в моем компоненте.

Итак, во-первых, мой метод на стороне сервера (используя экспресс и мангуст)

    app.post('/api/rolloutMeeting', async (req, res)=> {
    var singleMeetingID = req.body
    singleMeetingID = singleMeetingID.singleMeetingID
    var meeting = []

    meeting[0] = await Meeting.findOne({_id: singleMeetingID})
    companyID = meeting[0].compID.compID

    meeting[1] = []
    for(var i = 0; i < meeting[0].projectIDs.length+1; i++) {
        meeting[1][i] = await Project.findOne({_id: meeting[0].projectIDs[i]})
    }

    meeting[2] = []
    for(var j = 0; j < meeting[1][j].taskIDs.length; j++) {
        for(var k = 0; k < meeting[1][j].taskIDs.length; k++) {
            meeting[2][j] = await Content.findOne({_id: meeting[1][j].taskIDs[j]})
        }
    }

    console.log(meeting)

    res.json(meeting)
})

Вывод работает нормально и точно так, как я хотел.

Это мой метод обслуживания, который запрашивает данные у API.

  rolloutMeeting(singleMeetingID) {
    return this.http.post('/api/rolloutMeeting', {
      singleMeetingID
    })
  }

И, наконец, мой компонент, где, скорее всего, скрыта ошибка:

      import { Component, OnInit, Input } from '@angular/core';
import { MeetingService } from '../../meeting.service';
import { ProjectService } from '../../project.service';
import { ContentService } from '../../content.service'
import { meeting } from '../../meeting'
import { project } from '../../project';

@Component({
  selector: 'app-singlemeeting',
  templateUrl: './singlemeeting.component.html',
  styleUrls: ['./singlemeeting.component.css']
})
export class SinglemeetingComponent implements OnInit {
  @Input() singleMeetingID: String;

  constructor(private meetServ: MeetingService,
    private proServ: ProjectService,
    private taskServ: ContentService) { }

  ngOnInit() {
    this.getData()
  }

  getData() {
    this.meetServ.rolloutMeeting(this.singleMeetingID)
      .subscribe(data => this.meeting : any = data)
    console.log(this.meeting)
  }

  tasks = []
  projects = []
  meeting : any
}

Теперь, когда я делаю это: .subscribe (data => console.log (data)) я получаю точный вывод, как при консоли.logging массива собраний на моем сервере.

Я сделал много разных попыток связать его с моим массивом собраний в клиенте, например:

.subscribe(data => this.meeting = data[0] as meeting)

и

.subscribe(data => this.meeting = data as meeting)

и

    .subscribe(data => function {
    this.meeting = data
})

Также для каждой попытки я инициализировал var собрания как любой, как массив и без какого-либо объявления.

Однако ни одна из этих попыток, похоже, не сработала для меня, console.log (this.meeting) всегда дает мне неопределенное значение, в то время как console.log (data) всегда возвращает ответ, который я действительно хочу получить.

Что я хочу сделать, так это поместить данные [0] в переменную собрания и запустить поверх нее интерфейс встречи, данные [1] в массиве проекта с интерфейсом проекта и т. Д. *

Спасибо за попытку любому, кто читает это.

С наилучшими пожеланиями

Answer 1

Вы не показываете определение типа собрания и вашего класса контроллера, но попробуйте

.subscribe(data => { this.meeting = data; console.log(this.meeting) } )

Проблема, которую console.log показывает undefined, заключается в том, что функция обратного вызова внутри подписки запускается асинхронно (ПОСЛЕ следующей строки кода: console.log) - поэтому, если вы поместите console.log внутри обратного вызова, вы увидите результат

Вы также можете использовать следующую конструкцию с async / await:

async getData() {
    this.meeting = await this.meetServ.rolloutMeeting(this.singleMeetingID).toPromise();
    console.log(this.meeting)
}

но вы должны знать, что на самом деле код после await (console.log) будет запускаться асинхронно после загрузки данных (так что это что-то вроде синтаксического сахара, который делает ваш асинхронный код похожим на синхронный, поэтому он менее вложен)