Question

我遇到了同样的问题。我尝试在导航栏组件中显示用户的性别。我打电话给我的服务来获取用户对象然后我尝试设置我的“性别”以用于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 CODE

      <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>

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

3 个答案: