Angular 8: глобальная переменная this.chats не определена

Question

У меня есть модель с именем Чат , и она выглядит так:

export class Chat {
chatId?: number;
chatUser1?: string;
chatUser2?: string;
chatStatus?: string;
created_at?: any;
updated_at?: any;
deleted_at?: any;

}

В компоненте я хочу найти chatUser2 с указанным значением c, поэтому для этой модели я объявил массив с именем chats , например,

chats:Chat[];

и затем получил следующую функцию:

getChats(): void { 
this.loadingChats = true;

this.chatService.getChats().subscribe((data: any[]) => {
  this.chats = data;
});

this.toCall=true;
this.toAnswer=false;
this.toHangUp=false;
var status="true";

var chatUser2 = [];
var chatStatus = [];
var chatChannel = [];

chatUser2 = this.chats.map((v)=>v.chatUser2);
chatStatus = this.chats.map((v)=>v.chatStatus);
chatChannel = this.chats.map((v)=>v.chatId.toString());

var size = chatUser2.length;



for(var i=0; i<size ; i++) 
{
  console.log(i.toString());
  if(chatUser2[i] === this.userName && chatStatus[i]===status) 
  {
    this.toAnswer=true; 
    this.toCall=false;
    this.toHangUp=false;
    this.channel=chatChannel[i]; 
    console.log("break");
    break;
  }
}

Но консоль показывает эту ошибку ОШИБКА TypeError: "this.chats не определено" in:

chatUser2 = this.chats.map((v)=>v.chatUser2);

Большое спасибо.

Answer 1

this chatService.getChats() (наблюдаемый) - это асинхронная c операция, которую нужно подождать до ее завершения, один из способов решить эту проблему с помощью async / await

async getChats() : Promise<void> { 
this.loadingChats = true;

this.chats = await this.chatService.getChats().toPromise();

this.toCall=true;
this.toAnswer=false;
this.toHangUp=false;

var status="true";
var chatUser2 = [];
var chatStatus = [];
var chatChannel = [];

chatUser2 = this.chats.map((v)=>v.chatUser2);
chatStatus = this.chats.map((v)=>v.chatStatus);
chatChannel = this.chats.map((v)=>v.chatId.toString());

var size = chatUser2.length;

for(var i=0; i<size ; i++) 
{
  console.log(i.toString());
  if(chatUser2[i] === this.userName && chatStatus[i]===status) 
  {
    this.toAnswer=true; 
    this.toCall=false;
    this.toHangUp=false;
    this.channel=chatChannel[i]; 
    console.log("break");
    break;
  }
}

другой вариант - переместить код для тела метода подписки

getChats(): void { 
this.loadingChats = true;

this.chatService.getChats().subscribe((data: any[]) => {
  this.chats = data;
  // .... 
});

}