如何解决角度事件发射器对象渲染错误
我有一段不太容易理解的代码。我有一个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 举报,一经查实,本站将立刻删除。