Angular 6：无法将 api 数据绑定到客户端中的 var

Question

我在将请求的 api 数据绑定到我的组件中的变量时遇到问题。

首先，我的服务器端方法（使用 express 和 mongoose）

    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)) 我得到了准确的输出，就像我在 console.logging 我的服务器上的会议阵列时一样。

我做了很多不同的尝试将它绑定到客户端中的会议数组，例如：

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

和

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

和

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

同样对于每次尝试，我都将会议变量初始化为 any、数组并且没有任何声明。

但是，这些尝试似乎都不适合我，console.log(this.meeting) 总是给我未定义，而 console.log(data) 总是返回我真正想要的答案。

我想要做的是，将 data[0] 放入会议变量并在其上运行我的会议界面，将 data[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) 之后的代码将在加载数据后异步运行（因此这类似于语法糖，它使您的异步代码看起来像同步，因此嵌套较少）