如何在Angular中显示console.log数据？

Question

我们创建了一个显示在线用户的功能。 它在控制台日志中工作正常，但是如果用户在线，我想显示p作为结果。 这是代码：

ngOnInit() {
    this.socket.emit('online', { room: 'global', user: this.user.username });
    this.socket.on('refreshPage', () => {
      this.GetUserData(this.name);
    });
  ...
  ...
ngAfterViewInit() {
    this.socket.on('usersOnline', data => {
      console.log(data);
    });
  }

在console.log（data）上方显示控制台内所有在线用户的详细信息。 应该添加什么而不是console.log在前端显示条件？ 我们添加了以下内容：

  CheckIfOnline(name) {
    const result = _.indexOf(this.onlineusers, name);
    if (result > -1) {
      return true;
    } else {
      return false;
    }
  }

HTML

 <p class="" *ngIf="CheckIfOnline(user.username)">online</p>

但是它没有显示，因为CheckIfOnline函数中缺少某些内容。 此功能只是一个原型。 我认为它应该与ngAfterViewInit一起使用。 我应该添加什么而不是该console.log并修复checkifonline以便彼此通信并在用户在线时显示该p标签？

Answer 1

您可以定义布尔标志变量，并在ngAfterViewInit方法中进行设置。 心连心

public isOnline: boolean = false;

public ngAfterViewInit() {
    this.socket.on('usersOnline', data => {
     /** Check user name exist in data contains */
     this.isOnline = /* [write a logic check this.user.username exist in data ] */
    });
  }

 <p class="" *ngIf="isOnline">online</p>