我的项目组件之一有问题。应用启动时,我会调用
使用“ getAboutMeById”函数获取用户详细信息,并在“ site-header.component.ts”上,在控制台中出现以下错误,但是在页面加载完成后可以看到该图像。
我尝试将数据按原样放入服务中,但是得到了相同的结果
组件:
export class SiteHeaderComponent implements OnInit {
aboutMe: AboutMe = null;
year: number = new Date().getFullYear();
@Output() navigationClickFired = new EventEmitter<string>();
constructor(private moranmonoService: MoranMonoService) { }
ngOnInit() {
this.getAboutMeById(1);
}
getAboutMeById(id: number) {
this.moranmonoService.GetAboutMeById(id).subscribe(res => {
let result = <AboutMe>res;
if (result != null) {
this.aboutMe = new AboutMe(result.name, result.emailAddress, result.phoneNumber, result.homeAddress, result.profilePhotoUrl,
result.profession, result.introduction, result.cvFileUrl, result.experience);
} else {
console.log('AboutMeComponent | getAboutMeById: Encountered an error.', result);
}
});
}
onNavigationClick(linkName: string) {
this.navigationClickFired.emit(linkName);
}
}
html代码:
<header id="site_header" class="header mobile-menu-hide">
<div class="header-content clearfix">
<div class="my-photo">
<img src="{{aboutMe.profilePhotoUrl}}" alt="image" class="img-responsive" style="max-width: 100px">
</div>
<div class="site-title-block">
<div class="site-title">{{ aboutMe.name }}</div>
</div>
<div class="site-nav">
<ul id="nav" class="site-main-menu">
<li>
<a class="pt-trigger" (click)="onNavigationClick('AboutMe')" href="#about-me">About Me</a>
</li>
<li>
<a class="pt-trigger" (click)="onNavigationClick('Resume')" href="#resume">Resume</a>
</li>
<!-- <li>
<a class="pt-trigger" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="pt-trigger" href="#blog">Blog</a>
</li> -->
<li>
<a class="pt-trigger" (click)="onNavigationClick('Contact')" href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="copyrights">All rights {{ year }}</div>
</div>
</header>
<div class="mobile-header mobile-visible">
<div class="mobile-logo-container">
<div class="mobile-header-image">
<a href="#">
<img src="{{aboutMe.profilePhotoUrl}}" alt="image">
</a>
</div>
<div class="mobile-site-title"><a href="#">{{aboutMe.name}}</a></div>
</div>
<a class="menu-toggle mobile-visible">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="lmpixels-arrows-nav">
<div class="lmpixels-arrow-left"><i class="lnr lnr-chevron-left"></i></div>
<div class="lmpixels-arrow-right"><i class="lnr lnr-chevron-right"></i></div>
</div>
服务:
@Injectable({
providedIn: 'root'
})
export class MoranMonoService {
baseurl = environment.baseURL;
constructor(private httpClient: HttpClient) { }
GetAboutMeById(id: number) {
let reqHeader = new HttpHeaders();
reqHeader.append('Content-Type', 'application/json');
return this.httpClient.get(this.baseurl + 'api/AboutMe/get-aboutme-byId?id=' + id, { headers: reqHeader });
}
GetResumeEntities() {
return this.httpClient.get(this.baseurl + 'api/Resume/get-resume-entites');
}
GetExperienceEntities() {
return this.httpClient.get(this.baseurl + 'api/Experience/get-expirence-entites');
}
SendEmail(contact: Contact) {
return this.httpClient.post(this.baseurl + 'api/contact/send-email', contact);
}
}
我希望图像加载时没有错误,但是出现以下错误:
ERROR TypeError: Cannot read property 'profilePhotoUrl' of null
at Object.eval [as updateRenderer] (SiteHeaderComponent.html:29)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:11080)
at checkAndUpdateView (core.js:10456)
at callViewAction (core.js:10692)
at execComponentViewsAction (core.js:10634)
at checkAndUpdateView (core.js:10457)
at callViewAction (core.js:10692)
at execComponentViewsAction (core.js:10634)
at checkAndUpdateView (core.js:10457)
at callWithDebugContext (core.js:11344)
参考方案
我的猜测是,您的SiteHeader组件的html文件正在尝试访问aboutMe变量,而您的服务尚未加载数据。等待数据上传,您的aboutMe变量仍处于初始状态,为null。
如果错误是关于'profilePhotoUrl'属性的,那是因为它必须是html文件中第一个必需的属性。
解决方案是将所有基于aboutMe变量的html元素包装在带有* ngIf的元素中
<div *ngIf="aboutMe">
<img src="aboutMe.profilePhotoUrl" />
<div>
从C#调用javascript函数不起作用 - c#大家好,我在popupscrit.js文件中使用以下方法:function afficherMessageInfo( id, message) { //Get the A tag alert('executing the client code'); //Get the screen height and width var maskHe…
如何使用PHP从动态输入字段捕获数组值? - javascript我正在编写一个在线时间跟踪网页,允许用户将学习时间输入该系统。用户将首先输入名称,然后根据日期输入学习时间。一天中可能会有多个学习时间。以下是我第一页的编码,<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…
Div单击与单选按钮相同吗? - php有没有一种方法可以使div上的click事件与表单环境中的单选按钮相同?我只希望下面的div提交值,单选按钮很丑代码输出如下:<input id="radio-2011-06-08" value="2011-06-08" type="radio" name="radio_date…
故障排除“警告:session_start():无法发送会话高速缓存限制器-标头已发送” - php我收到警告:session_start()[function.session-start]:无法发送会话缓存限制器-标头已发送(错误输出开始如果我将表单数据提交到其他文件进行处理,则可以正常工作。但是,如果我将表单数据提交到同一页面,则会出现此错误。请建议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…
在PHP文件中调用javascript函数并在加载HTML文件之后? - javascript我需要在我的php中调用js函数,但无法正常工作。有人可以告诉我我在做什么错吗?我该如何轻松地做到这一点?谢谢!我有三个文件: mail.php负责发送$ _POST的内容(工作正常)。我调用我的javascript函数来切换模式,具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…