Angular 仅当两次单击按钮时，才会显示值

我已经在Angular试了一个月了。我对网络开发非常陌生，冒着听起来像新手的风险，我发布了这个问题

我制作了一个简单的angular应用程序，只需单击名为

roomSearch（）

的按钮，即可将一些表单数据发送到MVCWebAPI。结果数据从Web API发送回角度组件，该组件在html页面中显示它。 问题是如果我必须看到结果，我总是需要点击按钮两次。一次点击就不行了，我很难弄清楚原因

这是我的密码：

我的HTML：

服务文件

---

上面的代码行

console.log（this.roomList）

在第一次单击时显示未定义，但在第二次单击时显示控制台上的正确值。我做错了什么？

首先，感谢您的代码格式。读它是一种乐趣

其次，您面临的是一个异步问题

在进行HTTP调用时，Angular使用可观察对象（在本例中，您将其转换为承诺，但原理相同）。可观察/承诺是异步的，意味着结果将在以后出现，而不是在您发出请求时出现

在您的情况下，会发生什么：

this.http.get(this.finalUrl)
.map((data: Response)=>{
  return data.json() as Room[];
}).toPromise().then(x =>{
  this.roomList = x;
});

console.log(this.roomList);

你不必等待承诺得到解决（又称结果）。这就是为什么您有一个未定义的

日志的原因

你应该试试这个：

processRequest(roomList: Room[]) {

  if (roomList != null) {
    this.finalRoom1 = 0; this.finalRoom2 = 0; this.finalRoom3 = 0; this.finalRoom4 = 0;
    this.priceRoom1 = 0; this.priceRoom2 = 0; this.priceRoom3 = 0; this.priceRoom4 = 0;

    roomList.forEach((e: any) => {
      this.finalRoom1 = this.finalRoom1 + Number(e.UnitPrice1);
      this.finalRoom2 = this.finalRoom2 + Number(e.UnitPrice2);
      this.finalRoom3 = this.finalRoom3 + Number(e.UnitPrice3);
      this.finalRoom4 = this.finalRoom4 + Number(e.UnitPrice4);
    });

    console.log(roomList); //This statement shows undefined at first click but on the second click showcases the correct value on the console.

    if (this.finalRoom1 > 0)
      this.show = true;
    else
      this.show = false;

    return this.show;
  }
}

在代码中，删除之后的所有内容：

return this.http.get(this.finalUrl)
  .map((data: Response) => {
    return data.json() as Room[];
  }).toPromise().then(x => {
    return Promise.resolve(this.processRequest(x))
  });

最后，在组件中，必须执行以下操作：

roomSearch(form: NgForm)
{
  this.roomService.getRoomList(form.value.startDate, form.value.endDate).then(show => this.show = show);
}

用文字向您解释：

发出HTTP请求以获取房间，然后订阅，然后等待结果。结果出现后，使用processRequest处理请求并返回此过程的结果。处理完成后，由于我订阅了获取结果，所以将结果绑定到组件的变量show

如果这还不够，尽管问吧
 非常感谢你的鼓励之词，让它如此容易理解。我认为您的代码是一个很大的改进，但是，我在服务文件中得到了一个错误。类型“Promise”上不存在属性“map”。哎呀！将
map
替换为
then
，并将其中唯一一行代码替换为
return Promise.resolve（this.processRequest（x））
（这与map完全相同，但有几个步骤）没问题：）祝您的项目好运！（请记住将您的问题标记为已解决！）
processRequest(roomList: Room[]) {

  if (roomList != null) {
    this.finalRoom1 = 0; this.finalRoom2 = 0; this.finalRoom3 = 0; this.finalRoom4 = 0;
    this.priceRoom1 = 0; this.priceRoom2 = 0; this.priceRoom3 = 0; this.priceRoom4 = 0;

    roomList.forEach((e: any) => {
      this.finalRoom1 = this.finalRoom1 + Number(e.UnitPrice1);
      this.finalRoom2 = this.finalRoom2 + Number(e.UnitPrice2);
      this.finalRoom3 = this.finalRoom3 + Number(e.UnitPrice3);
      this.finalRoom4 = this.finalRoom4 + Number(e.UnitPrice4);
    });

    console.log(roomList); //This statement shows undefined at first click but on the second click showcases the correct value on the console.

    if (this.finalRoom1 > 0)
      this.show = true;
    else
      this.show = false;

    return this.show;
  }
}

return this.http.get(this.finalUrl)
  .map((data: Response) => {
    return data.json() as Room[];
  }).toPromise().then(x => {
    return Promise.resolve(this.processRequest(x))
  });

roomSearch(form: NgForm)
{
  this.roomService.getRoomList(form.value.startDate, form.value.endDate).then(show => this.show = show);
}