Question

在尝试调用此函数中的Observable以在component.html中循环时出现问题。当我尝试在.html组件文件中循环它时，它只显示控制台日志实际上显示整个JSON数据的一个observable正在传递给MonthlyCPMUList。我错过了什么？

＆＃13;

    getMonthlyCPMU() {
    return this.http.get(this.CPMULink)
        .subscribe(MonthlyCPMUList => 
          console.log(MonthlyCPMUList),
            error => console.log('Error :: ' + error),
        );
  }

＆＃13;

Component.html文件

＆＃13;

<div class="container">
  <div class="row">
    <table class="table">
      <thead class="thead-inverse">
      <tr style="display: flex; justify-content: center;">
        <th class="text-center">Month</th>
        <th class="text-center">CPMU</th>
      </tr>
      </thead>
      <tbody style="display: flex; justify-content: center; flex-flow: column; align-items: center;">
      <tr *ngFor="let post of MonthlyCPMUList" class="row">
        <td class="text-center">{{post.Month | date}}</td>
        <td class="text-center">{{post.CPMU}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

Answer 1

这里的问题是您的Observable订阅中的MonthlyCPMUList和您的组件在这里是不同的。

getMonthlyCPMU() {
    return this.http.get(this.CPMULink)
        .subscribe(MonthlyCPMUList => 
          console.log(MonthlyCPMUList),
            error => console.log('Error :: ' + error),
        );
  }

上面的

MonthlyCPMUList是您的HTTP GET observable订阅的本地。

<tr *ngFor="let post of MonthlyCPMUList" class="row">
        <td class="text-center">{{post.Month | date}}</td>
        <td class="text-center">{{post.CPMU}}</td>
      </tr>

上面的

MonthlyCPMUList指的是组件中的变量。

为此，要将此组件变量设置为Observable响应的值，请执行此操作。

return this.http.get(this.CPMULink)
        .subscribe(MonthlyCPMUList => { 
          console.log(MonthlyCPMUList);
          this.MonthlyCPMUList = MonthlyCPMUList;
         },
          error => console.log('Error :: ' + error),
        );

希望这有帮助。

将JSON Observable传递给要再次使用的函数（Angular 5）

1 个答案: