There are no changes to the BehaviorSubject view, but only when visiting the first page

Question

I wrote a table module that includes a filter module, a tab navigation module, and a pagination module. This table module is implemented by various parent components, such as a user list or message list. The parent sends the list of objects to the table module, where it will be sent to different child components (filter, tab navigation, pagination). Here is a basic pagination installation as only one child component.

To get the list of messages as a conversation list, I built a conversation service where all messages are received from the server and converted to a conversation list. When the conversation list in the service has changed, the event is activated. Because the message list component is subscribed to this event, the list in the message list will also change.

@Injectable()
export class ConversationService {

    private conversationList: Conversation[];
    private changeConversationListSource = new Subject<any[]>();
    conversationListChanged$ = this.changeConversationListSource.asObservable();

    constructor(
        private authService: AuthenticationService,
        private messageService: MessageService) { }

    getConversationList() {
        if (this.conversationList)
            this.changeConversationListSource.next(this.conversationList);
        else
            this.getMessages()
                .then(messages => {
                    this.buildConversations(messages);  // conversationList built in here
                    this.changeConversationListSource.next(this.conversationList);
                });
    }

    private getMessages(): Promise<Message[]> {
        return this.messageService
                   .getMessagesByUserId(this.authService.getAuthElement().userId);
    }
}

The problem is that the first time you visit a page, the displayed table does not change after you convert the list to pagination. When I return to the page, click the tab navigation tab or the site button paginated. This ONLY happens for the message list component, and not for the user list component. It is strange that only the table itself will not be displayed correctly, the resulting list of objects in the table module is correctly converted by pagination.

, BehaviorSubject 3 , 6 . , , , .

API ConversationService, .

getConversationList() {
    this.changeConversationListSource.next([
        new Conversation(),
        new Conversation(),
        new Conversation(),
        new Conversation(),
        new Conversation(),
        new Conversation()
    ]);
}

?

1

.

private buildConversations(messages: Message[]): void {
    let conversations: Conversation[] = [];     // 
    let users = this.groupUsers(messages);      // 
    conversations = conversations.concat(       // 
        this.buildConversationList(users.internUsers, messages));
    conversations = conversations.concat(       // 
        this.buildConversationList(users.externUsers, messages));
    this.conversationList = conversations;
}

private buildConversationList(users: any[], messages: Message[]): Conversation[] {
    let conversations: Conversation[] = [];
    let conversation: Conversation;
    users.forEach(user => {
        for (let category in MessageCategory) {
            conversation = new Conversation();
            conversation.category = MessageCategory[category];
            if (typeof user === 'string') conversation.externPartner = user;
            else conversation.internPartner = user;
            conversation.messages = messages.filter(message => {
                    if (message.category === MessageCategory[category])
                        if (typeof user === 'string')
                            return this.checkExternMessage(message, user, conversation);
                        else
                            return this.checkInternMessage(message, user, conversation);
            });
            if (conversation.messages.length > 0) conversations.push(conversation);
        }
    });
    return conversations;
}

private checkExternMessage(message: Message, user: string, conversation: Conversation): boolean {
    if (message.receiver === undefined && message.sender === undefined)
        if (message.receiverMail !== null && message.receiverMail === user) {
            if (!message.isRead && this.messageService.isUserMessageReceiver(message))
                conversation.newMessages++;
            return true;
        }
        else if (message.senderMail !== null && message.senderMail === user) {
            if (!message.isRead && this.messageService.isUserMessageReceiver(message))
                conversation.newMessages++;
            return true;
        }
    return false;
}

private checkInternMessage(message: Message, user: User, conversation: Conversation): boolean {
    if (message.receiver !== undefined && message.sender !== undefined)
        if (message.receiver !== null && message.receiver.id === user.id) {
            if (!message.isRead && this.messageService.isUserMessageReceiver(message))
                conversation.newMessages++;
            return true;
        }
        else if (message.sender !== null && message.sender.id === user.id) {
            if (!message.isRead && this.messageService.isUserMessageReceiver(message))
                conversation.newMessages++;
            return true;
        }
    return false;
}

2

this.buildConversations() , . , , .

private buildConversations(messages: Message[]): void {
    let conversations: Conversation[] = [];
    let users = this.groupUsers(messages);
    for (var i = 0; i < 10; i++)
        conversations.push(new Conversation());
    this.conversationList = conversations;
}

, , API, . API.

@Injectable()
export class MessageService {
    private newMessages: number;
    newMessagesChanged: EventEmitter<number>;

    constructor(
        private authService: AuthenticationService,
        private httpClient: HttpClient) {
        this.newMessagesChanged = new EventEmitter<number>();
    }

    getMessagesByUserId(userId: number): Promise<Message[]> {
        if (this.messages)
            return new Promise<Message[]>((resolve, reject) => resolve(this.messages));
        return this.httpClient
                   .get(MessageService.API + userId, this.httpClient.getHeader())
                   .then(res => this.handleMessageList(this.httpClient.extractData(res)));
    }

    private handleMessageList(messages: Message[]): Message[] {
        this.newMessages = 0;
        this.messages = messages;
        this.messages.forEach(message => {
            if (!message.isRead && this.isUserMessageReceiver(message))
                this.newMessages++;
        });
        this.newMessagesChanged.emit(this.newMessages);
        return this.messages;
    }
}