无法将复杂数据分配到Angular 6中的数组变量中

Question

我已经实现了一种从HTTP请求中检索数据的方法，它可以正常工作并返回复杂的数据列表。

但是我担心的是，当我将返回的列表分配给变量时，它没有分配。所以我什至无法循环该变量，因为它在.ts文件中是 undefined 。

这是我的组件

import { Component, OnInit } from '@angular/core';
import { ChatUserVM } from '../shared/models';
import { UserService } from '../shared/service/user.service';
@Component({
  selector: 'app-chat-footer',
  templateUrl: './chat-footer.component.html',
  styleUrls: ['./chat-footer.component.css'],
})
export class ChatFooterComponent implements OnInit { 
  friendList: ChatUserVM[] = []; 

  constructor(private userService: UserService) {  
  }

  ngOnInit() {
    this.getAllFriendsFromDatabase();
  }

  getAllFriendsFromDatabase() {
    this.userService.getUsers().subscribe(
      data => {
        this.friendList = data;
        console.log('DB usersss ---> ' + this.friendList);
      }
    );
  }
}

这是我的HTTP服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {ChatUserVM} from "../models";

@Injectable()

export class UserService {

  constructor(private http: HttpClient) { }

  getUsers() {      
    return this.http.get<ChatUserVM[]>('https://localhost:44346/api/chat/GetAllUsers');
  }
  
}

Answer 1

这是调试器错误。 这个使它感到困惑。如果要调试生成的javascript，则将获得正确的值，但是在这种情况下，调试器会将 this 解析为窗口，该窗口很可能不会包含friendList字段或导致显示的属性“未定义”。 这是为什么我从不调试打字稿代码，而是调试生成的javascript的原因。不是说您不应该这样做，只是要注意这一警告。

Answer 2

问题已经解决了..：D它在我这样改变后就起作用了。

 getAllFriendsFromDatabase() {
    var self = this;
    this.userService.getUsers().subscribe(
      data => {
        self._moderatorList = data as ChatUserVM[];
        console.log('DB usersss ---> ' + self._moderatorList);
      }
    );
  }