Angular 4需要刷新页面才能显示数据答案

【问题标题】：Angular 4 Need to refresh page in order to show dataAngular 4需要刷新页面才能显示数据
【发布时间】：2017-10-29 14:28:55
【问题描述】：

我遇到了同样的问题。我尝试在导航栏组件中显示用户的性别。我要求我的服务为我获取用户对象，然后我尝试设置我的“性别”以在 HTML 中使用。问题是我需要刷新页面才能显示性别。有什么帮助吗？ :)

export class NavbarComponent implements OnInit {


title = 'navbar';
  userIsLoggedIn: boolean;
  user: User;
  currentUser: Parent;
  gender: string;

  constructor(private authenticationService: AuthenticationService, private router: Router, private parentService: ParentService) {
    authenticationService.userIsloggedIn.subscribe(isLoggedIn => {
      this.userIsLoggedIn = isLoggedIn;
      this.user = authenticationService.getUser();
    });
  }

  ngOnInit(): void {
    this.user = this.authenticationService.getUser();
    this.userIsLoggedIn = this.user != undefined;
    this.getParentFromUserEmail(this.user.email);
    this.getSex();
  }

  private getParentFromUserEmail(email: string) {
    this.parentService.getByEmail(email).map(
      (response) => this.currentUser = response).subscribe(data => {
        this.gender = data.type;
      });
  }

  getSex() {
    return this.gender;
  }
}

HTML 代码

      <div class="sidebar-account-content">
        <h3>{{user?.firstname}} {{user?.lastname}}</h3>
        <p *ngIf="getSex()">Test</p>
        <p *ngIf="gender === 'F'">Father</p>
        <p *ngIf="gender === 'M'">Mother</p>
      </div>

【问题讨论】：

第一次加载页面时，您是否在控制台中遇到任何错误？在 Plunker 中设置代码以重现您可能遇到的问题？
你在哪里显示性别，我只看到硬编码文本“父亲”、“母亲”、“测试”

标签： html angular frontend

【解决方案1】：

我想你的“getUser”是一个异步调用，因此你在调用它时没有用户的数据。我想你必须做出一些喜欢

  ngOnInit(): void {
      authenticationService.getUser().then((user)=>{
          this.user = user;
          this.userIsLoggedIn = this.user != undefined;
          this.getParentFromUserEmail(this.user.email);
          this.getSex();
      }
    });
  }

【讨论】：

【解决方案2】：

为什么要在方法上创建双向绑定？你可以在你的模板中说

 <p *ngIf="gender">Test</p>

然后您可以在您的 component.ts 文件中编辑性别，以便在模板上更改它。不需要吸气剂。

【讨论】：

【解决方案3】：

我解决了这个问题，我将返回类型从我的服务更改为承诺。此外，当我们的应用程序启动时，我们会立即路由到登录页面，因为它是一个安全平台。应用程序组件呈现了它不应该的导航栏，因此那里的所有内容都充满了错误。谢谢你的帮助，干杯。

【讨论】：