Question

使用Angular，我如何订阅像这样的对象数组：

[
    'abc/user2': { room: 'abc/user2', user: 'user2' },
    'abc/admin': { room: 'abc/admin', user: 'admin' }
]

目前这不起作用：

this.socketService.onRoom().subscribe(rooms => {
    this.rooms = rooms;
});

使用socketService：

public onRoom() {
    return new Observable<any>(observer => {
        this.socket.on('room', (data: any) => observer.next(data));
    });
}

修改

Mybad，似乎问题来自服务器（NodeJS / express / socket.io）：

chat-server.ts：

public rooms: Array<{room: string, user:string}> = [];

(...)
this.rooms[room] = {room: room, user: socket.user};
this.io.emit('room', this.rooms)
console.log('[server]rooms :', this.rooms)

服务器端，console.log打印：

[
    'abc/user2': { room: 'abc/user2', user: 'user2' },
    'abc/admin': { room: 'abc/admin', user: 'admin' }
]

但socketService中的客户端，如果我在这里执行console.log（数据）：

public onRoom() {
    return new Observable<any>(observer => {
        this.socket.on('room', (data: any) => {
            console.log(data)
            observer.next(data)
        });
    });
}

它返回：

[]

但是如果我发出服务器端：

this.io.emit('room', Object.keys(this.rooms))

Clientside它返回：

['abc/user2', 'abc/admin']

看起来我无法从socket.io发出一个对象数组？

Answer 1

你不能。你必须把它变成某种可观察的......

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

export class AppComponent implements OnInit {

    private readonly data = [
        {
            'abc/user2': { room: 'abc/user2', user: 'user2' }
        },
        {
            'abc/admin': { room: 'abc/admin', user: 'admin' }
        }
    ];
    private data$;

    ngOnInit() {
        this.data$ = new Observable((observer) => {
            observer.next(this.data);
            observer.complete();
        });
    this.data$.subscribe(data => {
        console.log(data);
    });
}

虽然还有很多其他方法（可能还有更好的方法）。这只是一个例子，因为我不确切地知道你想要完成什么。

Answer 2

您应该创建要在socket.on方法之外返回的observable。

public onRoom(): Observable<any> {
    BehaviorSubject<any> toReturn = new BehaviorSubject();
    this.socket.on('room', (data: any) => toReturn.next(data));
    return toReturn;
}

Answer 3

private myArray = [
    'abc/user2': { room: 'abc/user2', user: 'user2' },
    'abc/admin': { room: 'abc/admin', user: 'admin' }
];
private myObservable= Observable.of(this.myArray);

您可以订阅myObservable。

Answer 4

我终于设法通过不发出一个对象数组来解决这个问题，而只是一个对象

chat-server.ts

//public rooms: Array<{room: string, user:string}> = [];
public rooms: any = {};

客户端，我将我的对象转换为数组，以便我可以迭代将其抛出模板。

chat-list.component.ts

this.socketService.onRoom().subscribe(rooms => {
    this.rooms = rooms;
    this.roomsArr = Object.entries(this.rooms);

});

但是，我不明白为什么我无法从socket.io

发出一个对象数组。

Angular，Socket.io：发出一个对象数组

4 个答案: