键入Scripit#始终获取零大小的数组

时间:2017-07-10 12:32:26

标签: javascript node.js typescript mean-stack angular2-services

我正在尝试使用以下代码从我的Home.ts方法Auth.service中获取getSpams()中所有垃圾邮件的值,该方法运行正常并在控制台中正确显示结果。但是当我试图将Object(totalspam) Home.ts的服务结果保存为零大小的数组时。

以下是我的组件:

Home.ts

    import { NavController , IonicPage} from 'ionic-angular';
    import { Component } from '@angular/core';
    import { AuthService } from '../../providers/auth-service/auth-service';
    import { Spam } from '../../providers/auth-service/auth-service';
    import {Observable} from 'rxjs/Observable';
    @IonicPage()
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {

      totalspam:Spam[] = [];

      constructor(public navCtrl: NavController,private auth:AuthService) {

         this.auth.getSpams().subscribe(spam=>{this.totalspam = spam});
         console.log(this.totalspam);

      }

    }

AuthService.ts

    getSpams(): Observable<Spam[]> {
              let url = 'http://115.113.49.148:8080/allspam';
              let headers = new Headers();
              headers.append('Content-Type', 'application/x-www-form-urlencoded');
              let options   = new RequestOptions({ headers: headers });

              // get spams from api
              return this.http.get(url, options)
                  .map((response) => response.json());
          }

AuthService.ts

    export class Spam
    {
      _id:string;
      count:Number;
      spamNumber:string;
      spamType:Array<String>;  
    }

1 个答案:

答案 0 :(得分:4)

您的问题是您在异步方法之后直接进行控制台记录结果。此行:console.log(this.totalspam);在值实际更改之前被调用。当您处理异步请求时,延迟,请求大小和浏览器本身等因素可能意味着可变的解析时间。

异步方法的目的是在以后运行和处理结果而不阻塞任何其他代码,因此立即调用console.log。如果您将代码更改为以下内容,只要您收到结果,您应该会看到填充的数组:

this.auth.getSpams().subscribe(spam => {
    this.totalspam = spam;

    console.log(this.totalspam);
});

如果您仍然没有看到任何内容,则应检查您的请求是否返回了所需的结果。