изменения не обнаружены в angular 2

#angular

#angular

Вопрос:

У меня есть шаблон, в котором ссылки изменяются в соответствии с переменной ‘userId’.

 <nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo"><img src="../../public/images/logo.png" alt="" /></a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li>
        <a routerLink="" routerLinkActive="active"></a>
      </li>
      <li *ngIf="userId"><a>Welcome {{userInfo.name}}</a></li>
      <li><a routerLink="gallery" routerLinkActive="active">Gallery</a></li>
      <li *ngIf="userId"><a routerLink="upload" routerLinkActive="active">Upload</a></li>
      <li *ngIf="userId"><a routerLink="logout" routerLinkActive="active">Logout</a></li>
      <li *ngIf="! userId"><a routerLink="auth" routerLinkActive="active">Login</a></li>
      <li *ngIf="! userId"><a routerLink="auth" routerLinkActive="active">Register</a></li>
    </ul>
  </div>
</nav>
<router-outlet></router-outlet>
 

И у меня есть компонент, у которого есть служба, которая получает данные:

 import { Component, OnInit } from '@angular/core';

import { SessionService } from '../session.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [SessionService]
})
export class HomeComponent implements OnInit {

  public userId = "";
  public userInfo = "";

  constructor(
    private sessionService: SessionService
  ) { }

  ngOnInit() {
    this.userId = this.sessionService.getLoggedInUserId();
    if (this.userId !== null) {
      this.sessionService.getLoggedInUserDetails(this.userId).subscribe(
        data => {
          this.userInfo = data.data[0];
        }
      )
    }
  }
}
 

изменения вызова службы не обнаружены в части html. ссылки отображаются в соответствии с переменной ‘userId’.

Ответ №1:

Это может быть вызвано вашим sessionService , но ваш вопрос не содержит подробностей, чтобы быть уверенным.

Вы можете попробовать

   constructor(
    private sessionService: SessionService,
    private zone:NgZone
  ) { }

  ngOnInit() {
    this.userId = this.sessionService.getLoggedInUserId();
    if (this.userId !== null) {
      this.sessionService.getLoggedInUserDetails(this.userId).subscribe(
        data => {
          zone.run() => {
            this.userInfo = data.data[0];
          });
        }
      )
    }
  }
 

Если это решает проблему, то служба нуждается в дальнейшем исследовании.

Комментарии:

1. это не помогло. как и в react js, изменения в компонентах также отображаются в html-части, но здесь панель навигации не меняется. если я обновлю страницу, я увижу изменения на панели навигации.

2. Речь идет о userInfo.name , верно? Вы получаете сообщение об ошибке в консоли браузера?. Не могли бы вы попробовать {{userInfo?.name}} вместо этого? или {{userInfo | json}} и опубликовать комментарий с результатами.

3. нет его с идентификатором пользователя. сценарий заключается в том, что функция getLoggedInUserId() возвращает идентификатор, хранящийся в локальном хранилище. если идентификатор пользователя присутствует, то на стороне просмотра будут показаны только три ссылки.

4. Итак, что вы получаете, когда добавляете x{{userId}}y в tempalte (за пределами *ngIf="userId" ?

5. ничего. Но если я обновлю страницу, я смогу увидеть userId