Как исправить ошибки консоли при запуске компонента

Question

У меня проблема с одним из компонентов моего проекта. Когда приложение запускается, я вызываю функцию «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)

Answer 1

Я предполагаю, что ваш html-файл компонента SiteHeader пытается получить доступ к переменной aboutMe, пока ваша служба еще не загружает данные. В ожидании загрузки данных ваша переменная aboutMe все еще находится в исходном состоянии, равном нулю.

Если ошибка связана со свойством profilePhotoUrl, то это потому, что она должна быть первой в вашемhtml file.

Решением было бы обернуть все html-элементы на основе переменной aboutMe в элемент с * ngIf внутри

<div *ngIf="aboutMe">
  <img src="aboutMe.profilePhotoUrl" />
<div>