角度事件发射器对象渲染错误

问题描述

我有一段不太容易理解的代码。我有一个HTML模态，当我单击send Message时，应该打开一个HTML模态，然后send message modal将显示一条带有用户名的消息。请帮助我找到错误，因为根据日志，一切正常。首先是HTML：下拉菜单位于topbar组件中，当用户单击发送消息时会激活该下拉菜单。然后，该模式下带有附加的用户名，作为发送消息到{{来自事件发射器的用户名在此处}} ...然后，后端组件执行其余操作，如图所示。 错误是单击时我看不到sendMessageName变量。 发送消息到{{sendMessageName}} × 没关系 发信息

然后在此处击中组件...

import { Component,OnInit,OnDestroy } from '@angular/core';
import { Router } from "@angular/router";

// Services
import { AuthService } from '../auth.service';
import { LocalStorageService } from '../local-storage.service'
import { EventEmitterService } from "../event-emitter.service";
import { UserDataService } from '../user-data.service';
import { ApiService } from '../api.service';
import { AutoUnsubscribe } from '../unsubscribe';

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

@AutoUnsubscribe
export class TopbarComponent implements OnInit {

  public query: string = '';

  public usersId: string = '';

  public userId: string = '';

  public usersName: string = '';

  public profPic: string = 'default-avatar'

  public numOfFriendRequests: number = 0;

  public newMessageNotification: number = 0;

  public newNotifications: number = 0;

  public eventsMessage: string = '';

  private subscriptions = [];

  public sendMessageName: string = ''; // Here I even split the 
  // name form the object cause it seemed to wierdly retain the 
  // empty string instead of the value assigned.

  public sendMessageId: string = '';

  public searchForFriends() {
    this.router.navigate(['/search-results',{ query: this.query }]);
    
  };

  constructor(
    public auth: AuthService,private router: Router,public storage: LocalStorageService,private events: EventEmitterService,private centralUserData: UserDataService,private api: ApiService
  ) { }

  ngOnInit() {

    let updateMessageEvent = this.events.updateSendMessageObjectEvent.subscribe((d) => {
      this.sendMessageId = d.id;
      this.sendMessageName = d.name;

      console.log(this.sendMessageName);
      console.log(this.sendMessageId);
      console.log(d);
      
      

      // The log shows the name perfectly but not the front end.
      // Even when I use say the usersName it works.
      
    });
    console.log(this.sendMessageName);
    
    this.usersId = this.storage.getParsedToken()._id;

    this.usersName = this.storage.getParsedToken().name;

    let alertEvent = this.events.onAlertEvent.subscribe((msg) => {      
      this.eventsMessage = msg;
    }); 

    let friendRequestEvent = this.events.updateNumOfFreindRequestsEvent.subscribe((msg) => {
      this.numOfFriendRequests--;
      console.log(this.numOfFriendRequests);
      
    });
    

    let userDataEvent = this.centralUserData.getUserData.subscribe((data) => {
      this.userId = data._id;
      this.numOfFriendRequests = data.friend_requests.length;
      this.profPic = data.profile_image;
    });

    let requestObject: Object = {
      location:`users/get-user-data/${this.usersId}`,method: 'GET'
    };

    this.api.makeRequest(requestObject).then((val) => {
      this.centralUserData.getUserData.emit(val.user);
    });

    this.subscriptions.push(updateMessageEvent,alertEvent,friendRequestEvent,userDataEvent);
  };

}

事件发射器如下所示：

import { Injectable,EventEmitter } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EventEmitterService {

  onAlertEvent: EventEmitter<string> = new EventEmitter();

  updateNumOfFreindRequestsEvent: EventEmitter<string> = new EventEmitter();

  updateSendMessageObjectEvent: EventEmitter<object> = new EventEmitter();

  constructor() { }
}

请帮助我进行此修复。在项目继续中至关重要，在此先感谢社区一直以来一直在帮助我。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）