Question

我正在创建whatsappweb的副本，并且正在列出“用户主”用户的所有最新消息。

我总是从app.component插入所有选择器结果，但是这次我必须将此逻辑插入到哑组件中，因为它需要用户的ID才能呈现信息。

然后我好奇了，

我有一个用户列表，我需要在其下进行迭代以获取每个用户的ID，并能够与数据相交以获取最新消息等。

我该怎么做？

HTML：

<ul>
    <li *ngFor="let user of userFriends">
        <app-avatar [isBig]="true" [src]="user.avatar" [alt]="user.full_name"></app-avatar>
        <app-userfriend-last-messages-container
            [isNewLastMessage]="false"
            [username]="user.full_name"
            [lastmessage]="chatSelectorsService.getLastFriendMessage(userId).id | async"
        ></app-userfriend-last-messages-container>
        <app-userfriend-last-messages-information-container
            [isNewLastMessage]="false"
            [lastMessageTime]="chatSelectorsService.getLastFriendMessage(userId).time | async"
            [lastMessageAmount]="9"
        ></app-userfriend-last-messages-information-container>
    </li>
</ul>

TS：

@Component({
    selector: 'app-last-messages-list',
    templateUrl: './last-messages-list.component.html',
    styleUrls: ['./last-messages-list.component.scss'],
})
export class LastMessagesListComponent implements OnInit {
    @Input() userFriends: IUser[];
    @Input() chatLastMessages: IChatMessage[];

    constructor(readonly chatSelectorsService: ChatSelectorsService) {}

    ngOnInit(): void {}
}

Answer 1

尝试在模板中仅保留1个async管道，以获取其所需的所有信息，您的模板可能是

<ul *ngIf="data$ | async as data">
    <li *ngFor="let user of data.userFriends">
        <app-avatar [isBig]="true" [src]="user.avatar" [alt]="user.full_name"></app-avatar>
        <app-userfriend-last-messages-container
            [isNewLastMessage]="false"
            [username]="user.full_name"
            [lastmessage]="user.lastmessage"
        ></app-userfriend-last-messages-container>
        <app-userfriend-last-messages-information-container
            [isNewLastMessage]="false"
            [lastMessageTime]="user.lastMessageTime"
            [lastMessageAmount]="9"
        ></app-userfriend-last-messages-information-container>
    </li>
</ul>

，并且在您的组件中应添加data$，以汇总模板所需的所有数据。

@Component({
    selector: 'app-last-messages-list',
    templateUrl: './last-messages-list.component.html',
    styleUrls: ['./last-messages-list.component.scss'],
})
export class LastMessagesListComponent implements OnInit, OnChanges {
    @Input() userFriends: IUser[];
    @Input() chatLastMessages: IChatMessage[];

    // internal subject to notify on changes of userFriends
    protected userFriends$ = new Subject();

    // our stream that provides data for the template asynchronously.
    public readonly data$ = this.userFriends$.pipe(
        filter(users => Array.isArray(users)),
        switchMap(users => {
            const data = [];
            for (const user of users) {
                data.push(chatSelectorsService.getLastFriendMessage(user.id).pipe(
                    map(lastMessage => ({
                        ...user,
                        lastmessage: lastMessage ? lastMessage.id : undefined,
                        lastMessageTime: lastMessage ? lastMessage.time : undefined,
                    })),
                ));
            }
            return combineLatest(data);
        }),
        map(userFriends => ({userFriends})),
    );

    constructor(readonly chatSelectorsService: ChatSelectorsService) {}

    ngOnInit(): void {
        this.userFriends$.next(this.userFriends);
    }

    // listening on changes of the input.
    public ngOnChanges(changes: SimpleChanges): void {
        if (changes.userFriends && changes.userFriends.currentValue !== changes.userFriends.previousValue) {
            this.userFriends$.next(changes.userFriends.currentValue);
        }
    }
}

如何遍历选择器？

1 个答案: