Angular 角度4未定义，我相信我遗漏了一些基本的东西

所以，我在做一个角度的项目。我正在通过HTTP调用获取数据

为了验证我做的事情是否正确，我通常会在控制台上打印出来。当我尝试使用console.log（）打印结果时，它只适用于方法中的对象。当我离开方法的作用域时，console.log（）不再工作，并打印出一个没有值的数组。我想我理解错了

无论如何，我真正的问题是我从一个JSON文件中获取数据并将它们转换成两个独立的数组，然后我尝试合并这两个数组

以下是我正在使用的服务：

import { Http } from '@angular/http/';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

@Injectable()
export class ManagersService {
  list$;
  contacts$: Array<any>;
  items$;
  nameDatabase: { name: string, id: number  }[] = [] ;
  emailDatabase = [];
  managersList;
// tslint:disable-next-line:max-line-length
private url = ''; 
//I am hidden the URL, because it contains private data,
but it is a complex nested JSON object

  constructor(private http: Http) {


  }

  getList() {
    return this.http.get(this.url)
    .map(response => response.json());
  }


   getManagersNames() {

    this.getList()
    .subscribe(list => {
      this.list$ = list.data;
      //console.log(this.list$);
      for ( const l of this.list$) {
        const managerName = l.attributes.name;
        const managerId = parseInt(l.id);
        const manager = { name: managerName, id: managerId };
        this.nameDatabase.push(manager);
      }



    });
    const x = this.nameDatabase;
    return x;
  }

  checkId() {
    this.getList()
    .subscribe(list => {
      this.contacts$ = list.included;
      console.log(this.contacts$);
      for ( const c of this.contacts$) {
        const managerId = parseInt(c.id) - 1;
        return managerId;
      }
    });
  }

  getManagersContacts() {
    this.getList()
    .subscribe(list => {
      this.contacts$ = list.included;
     // console.log(this.contacts$);
      for ( const c of this.contacts$) {
        if (c.attributes.email) {
          const managerEmail = c.attributes.email;
          const managerId = parseInt(c.id) - 1;
          const manager = { email: managerEmail, id: managerId };
          this.emailDatabase.push(manager);
        } else {
          const managerName = c.attributes.name;
          const managerId = parseInt(c.id);
          const manager = { name: managerName, id: managerId };
          this.nameDatabase.push(manager);
        }
      }

    });
    const y = this.emailDatabase;
    return y;
  }



}

import { ManagersService } from './../services/managers.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list-items',
  templateUrl: './list-items.component.html',
  styleUrls: ['./list-items.component.css']
})
export class ListItemsComponent implements OnInit {
// tslint:disable-next-line:max-line-length



constructor(private service: ManagersService) {

  }

  ngOnInit() {
    const x = this.service.getManagersContacts();
    console.log(x);
    const y = this.service.getManagersNames();
    console.log(y);
    const hash = new Map();
    x.concat(y).forEach(function(obj) {
        hash.set(obj.id, Object.assign(hash.get(obj.id) || {}, obj));
    });
    const finalDatabase = Array.from(hash.values());
    console.log(finalDatabase);
    return finalDatabase;

  }

}

最后，我的app.module.ts：

import { ManagersService } from './services/managers.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';


import { AppComponent } from './app.component';
import { ListItemsComponent } from './list-items/list-items.component';
import { SearchListComponent } from './search-list/search-list.component';
import { DropDownComponent } from './drop-down/drop-down.component';


@NgModule({
  declarations: [
    AppComponent,
    ListItemsComponent,
    SearchListComponent,
    DropDownComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [
    ManagersService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

我不确定是否要尝试回答这个问题，因为如果没有一个突然袭击或堆叠的代码。。。我得到一个完全正确的类型化代码示例的可能性很小。但希望这能让你知道需要做什么

首先，推荐的经验法则是使用

subscribe

尽可能靠近UI。这样，您就可以收到数据检索完成的通知，并可以根据需要处理该数据

其次，要将Http调用中的数据重新格式化/转换为组件所需的格式，请在服务中使用

.map

而不是

.subscribe

服务

然后，该服务将如下所示：

  ngOnInit() {
    const x = this.service.getManagersContacts().subscribe(names => {
                // the data is retrieved at this point, so add any code here
                // inside the subscribe
                console.log(names);
              })
    // your other code
   }

注意：未检查或验证语法

  getManagersContacts() {
    this.getList().map(list => {
      this.contacts$ = list.included;
     // console.log(this.contacts$);
      for ( const c of this.contacts$) {
        if (c.attributes.email) {
          const managerEmail = c.attributes.email;
          const managerId = parseInt(c.id) - 1;
          const manager = { email: managerEmail, id: managerId };
          this.emailDatabase.push(manager);
        } else {
          const managerName = c.attributes.name;
          const managerId = parseInt(c.id);
          const manager = { name: managerName, id: managerId };
          this.nameDatabase.push(manager);
        }
      }
    });
    return this.nameDatabase;
  }

组件

组件的外观如下所示：

  ngOnInit() {
    const x = this.service.getManagersContacts().subscribe(names => {
                // the data is retrieved at this point, so add any code here
                // inside the subscribe
                console.log(names);
              })
    // your other code
   }

---

你到底期望什么？能够合并两个数组。当我运行console.log（finalDatabase）时；最后一个数组的结果，返回一个空数组@欢迎来到Stackoverflow！您缺少的关键基本概念是http是异步的。这意味着您将无法控制台。在您呼叫请求数据后，立即注销该数据。您必须等待数据返回。再次感谢DeborahK！非常感谢您的回复，应该会很有帮助：）@她的回答总是很有帮助的！请注意：）@yurzui谢谢您的反馈。我会这么做的。@deborahK我这么做了。但是现在，我的控制台上没有任何内容。log（）我只剩下一个空数组。订阅时，我可以看到阵列上的姓名、电子邮件和ID。正如我在回答中提到的。。。当我没有一个有效的示例时，很难获得正确的代码。如果您需要进一步的帮助，您可能需要构建一个plunker或stackblitz，其中只包含说明您的问题的基础知识，我们可以进一步研究。