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.loging我的服务器上的会议数组时相同的输出。

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

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

和

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

和

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

每次尝试时，我都将会议var初始化为any，数组和没有任何声明。

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

我要做的是将data [0]放入会议变量中并在其上运行我的会议界面，将data [1]放入具有项目界面的项目Array中，依此类推...

感谢尝试阅读此书的任何人。

最好的问候

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

但是您应该知道，事实上，等待数据之后的代码（console.log）将在数据加载后异步运行（因此，就像语法糖一样，它使您的异步代码看起来像同步的，因此嵌套较少）< / p>

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

1 个答案: