Question

我写了一个表格模块，其中包括一个过滤模块，一个标签导航模块和一个分页模块。此表模块由不同的父组件实现，如用户列表或消息列表。父级将一个对象列表发送到表模块，在那里它将被发送到不同的子组件（过滤器，选项卡导航，分页）。 Here是基本设置，分页只是一个子组件。

为了将消息列表作为会话列表获取，我构建了一个会话服务，其中所有消息都从服务器接收并转换为对话列表。当服务中的会话列表发生更改时，将触发事件。由于消息列表组件已订阅此事件，因此消息列表中的列表也将更改。

@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);
    }
}

问题是当我第一次访问页面时，在分页中转换列表后显示的表格不会改变。当我再次访问该页面时，单击选项卡导航的选项卡或其工作的分页的站点按钮。这仅适用于消息列表组件，而不是用户列表组件。奇怪的是，只有表本身不能正确显示，表格模块中收到的对象列表才能通过分页正确转换。

正如您所看到的，BehaviorSubject包含3个对象，但该表有6个条目。单击上面描述的任何按钮后，视图会正确更改。

当我没有在ConversationService中进行API调用时，它可以工作。

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;
    }
}

在BehaviorSubject上没有任何视图更改，但仅在第一页访问时

0 个答案: