Question

我在角度4或2中有一个常见错误，就是当我在订阅中初始化变量时它有延迟。问题是当我在html中使用该变量作为* ngIf时，可能它首先在html中呈现该变量，并且当时错误是未定义的。除了setTimeout之外，这个延迟的最佳解决方案是什么？

这是我的HTML：

<a *ngIf="currentUser.type==0" class="tooltip-icon menu-navbar-item" (click)="goListProperty()">

这是我的组成部分：

import {Component, OnInit, OnChanges, EventEmitter, Output, Input, 
ViewChild} from '@angular/core';
import {AuthenticationService} from "../../services/authentication.service";
import {LoginService} from "../../services/login-service.service";
import {SignUpService} from "../../services/signup-service.service";
import {Subscription} from 'rxjs';
import {Router} from '@angular/router';
@Component({
 selector: 'header-component',
 templateUrl: './header.component.html',
 })
 export class HeaderComponent implements OnInit {
 private subscription: Subscription;
 menu: boolean;
 index: number;
 menuButton: number;
 user: any;
 isOpen = false;
 currentUser: any;
 loading: boolean;

 constructor(private authentication: AuthenticationService, private 
 signUpService: SignUpService,
          private loginService: LoginService, private router: Router) {
 this.user = AuthenticationService.check();
  }

ngOnInit() {
if (this.user) {
  this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
  console.log(this.currentUser.type);
  this.subscription = this.authentication.notifyObservable$.subscribe(res => 
{
    this.currentUser = res;
    console.log(this.currentUser.type);
  });
}
this.subscription = this.loginService.notifyUserLoginObservable$.subscribe((res) => {
  console.log(res);
  this.user = res;
});
this.index = 1;
}

谢谢你的帮助:)。

Answer 1

您可以默认设置值。例如

currentUser: any = [];

和你的html shloud一样

<div *ngIf="currentUser.lenth > 0">
<a *ngIf="currentUser.type==0" class="tooltip-icon menu-navbar-item"(click)="goListProperty()">
</div>

Answer 2

将ngOnInit的所有代码也放在构造函数中，这样当第一次加载页面时，所有变量都将具有该值，并将显示在html中。

Answer 3

<a *ngIf="currentUser && currentUser.type==0" class="tooltip-icon menu-navbar-
    item" (click)="goListProperty()">

这里将检查当前用户是否定义，如果不是，则不会检查currentUser.type以防止错误

Answer 4

您可以在HTML文件中使用null-safe运算符，如下所示：

<a *ngIf="currentUser?.type==0" class="tooltip-icon menu-navbar-item" (click)="goListProperty()">

这样，如果currentUser为null或未定义，则不会抛出错误。

您可以在https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

了解有关此运算符的更多信息

如何修复html中的变量和角度4中的控制器之间的延迟？

4 个答案: