角度* ng用于不获取先前的元素

我在我的角度和节点应用程序中使用socket.io。用户进入房间后，用户可以在用户列表中看到其用户名。当user2加入时，user1可以在用户列表中看到user1和user2。但是，user2只能看到user2。如果用户3加入。 user1可以看到用户1，user2和user3。用户2可以看到用户2和用户3。但是，user3仅看到user3。

chat.service.ts

import { Injectable } from '@angular/core';
import * as io from 'socket.io-client';
import { Observable, onErrorResumeNext, observable } from 'rxjs';
//import { Observable } from 'rxjs/Observable';


@Injectable()

export class ChatService {
  private socket = io('http://localhost:8080');

  joinRoom(data) {
    this.socket.emit('join', data);
  }


  newUserJoined() {
    let observable = new Observable<{user: String, message:String}>(observer => {
      this.socket.on('new user joined ', (data) => {
        observer.next(data);
      });
      return () => {
        this.socket.disconnect();
      };
    });
    return observable;
  }

  leaveRoom(data) {
    this.socket.emit('leave', data);
  }

  userLeftRoom() {
    let observable = new Observable<{user: String, message:String}>(observer => {
      this.socket.on('left room', (data) => {
        observer.next(data);
      });
      return () => {
        this.socket.disconnect();
      };
    });
    return observable;
  }

  sendMessage(data) {
    this.socket.emit('message', data);
  }

  newMessageRecieved() {
    let observable = new Observable<{user: String, message:String, time: any}>(observer => {
      this.socket.on('new message', (data) => {
        observer.next(data);
      });
      return () => {
        this.socket.disconnect();
      };
    });
    return observable;
  }


  getRoomUsers() {
    let observable = new Observable<{user: String, message:String}>(observer => {
      this.socket.on('roomUsers', (data) => {
        observer.next(data);
      });
      return () => {
        this.socket.disconnect();
      };
    });
    return observable;
  }
}

chat.component.ts

import { Component, OnInit } from '@angular/core';
import { ChatService } from '../../services/chat.service';
import { AuthService } from '../../services/auth.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css'],
  providers: [ChatService]
})


export class ChatComponent implements OnInit {

  room: any;
  user: any;
  username: any;
  roomName: any;
  messageArray: Array<{user: String, message: String, time: any}> = [];
  userArray: Array<{user: String, message: String}> = [];
  messageText: String;
  time: any;


  constructor( private chatService: ChatService,  private authService: AuthService) {

    // this.chatService.newUserJoined()
    // .subscribe(data => this.userArray.push(data));

    // this.chatService.userLeftRoom()
    // .subscribe(data => this.userArray.splice(this.userArray.indexOf(data)));

    this.chatService.newMessageRecieved()
    .subscribe(data => this.messageArray.push(data));

    this.chatService.getRoomUsers()
    .subscribe(data => this.userArray.push(data));

  }

  ngOnInit() {
    this.getUser();
  }

  getUser() {
    this.user = localStorage.getItem('user');
    this.username = JSON.parse(this.user).username;
    this.getRoom();
  }

  getRoom() {
    this.room = localStorage.getItem('room');
    this.roomName = JSON.parse(this.room).name;
    this.join();
  }

  join() {
    console.log(this.roomName);
    console.log(this.username);
    this.chatService.joinRoom({user: this.username, room: this.roomName});
  }


  leave() {
    console.log(this.roomName);
    console.log(this.username);
    let userIndex = this.userArray.indexOf(this.username);
    delete this.userArray[userIndex];
    localStorage.removeItem('room');
    this.chatService.leaveRoom({user: this.username, room: this.roomName});
  }

  sendMessage() {
    console.log(this.roomName);
    console.log(this.username);
    this.chatService.sendMessage({user: this.username, room: this.roomName, message: this.messageText, time: this.time});
    this.messageText = '';
  }

}

chat.component.html

 <ul *ngFor="let item of userArray" id="usersList">
          <li >{{item.user}}</li>
        </ul>