角度4：从数据库接收的数据生成的HTML链接不会出现，直到页面刷新

Question

首先，感谢SO的每个人。 如果我能够在2个月内学习并积累使用价值，那是因为你们所有人。 实际上我很惊讶我能够做到这一点。

---

html模板存在问题。 我正在根据用户权限从firebase实时数据库获取导航链接。 发生的方式是：

a）用户进入登录页面。 导航栏位于顶部，但由于LoggedIn标志设置为false，因此不显示任何链接。

b）用户登录并转到其仪表板。

c）即使LoggedIn现在为true，导航栏仍然没有任何值。

d） 仅在页面刷新后，导航栏才会显示所有链接。

我认为出现问题的相关HTML。 我同时使用* ngIf和* ngFor。 该范围以前曾是ng-template。

<div class="collapse navbar-collapse" id="navbarSupportedContent" *ngIf="loggedIn">
    <!--This part is pushed to the left-->

    <ul class="navbar-nav">
      <span *ngFor="let mainPerm of keyValues">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" [id]="mainPerm" role="button" data-toggle="dropdown"
             aria-haspopup="true" aria-expanded="false">
            {{mainPerm.toUpperCase()}}
          </a>
          <div class="dropdown-menu" [attr.aria-labelledby]="mainPerm">
            <a class="dropdown-item" *ngIf="dropDownList[mainPerm]['View']"
               [routerLink]="dropDownList[mainPerm]['View']">View Details (<fa name="search" class="ml-auto"></fa>)</a>
            <a class="dropdown-item" *ngIf="dropDownList[mainPerm]['Add']"
               [routerLink]="dropDownList[mainPerm]['Add']">Add New  (<fa name="plus"></fa>)</a>
          </div>
        </li>
      </span>
    </ul>

完整的html模板：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">

  <a class="navbar-brand" routerLink="/">
    <img src="../../assets/LOGO-WHITE.png" height="30">
  </a>
  <!--Only if the users are logged in-->


  <!--navbar close button-->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!--navigation which is linked to close button-->

  <div class="collapse navbar-collapse" id="navbarSupportedContent" *ngIf="loggedIn">
    <!--This part is pushed to the left-->

    <ul class="navbar-nav">
      <span *ngFor="let mainPerm of keyValues">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" [id]="mainPerm" role="button" data-toggle="dropdown"
             aria-haspopup="true" aria-expanded="false">
            {{mainPerm.toUpperCase()}}
          </a>
          <div class="dropdown-menu" [attr.aria-labelledby]="mainPerm">
            <a class="dropdown-item" *ngIf="dropDownList[mainPerm]['View']"
               [routerLink]="dropDownList[mainPerm]['View']">View Details (<fa name="search" class="ml-auto"></fa>)</a>
            <a class="dropdown-item" *ngIf="dropDownList[mainPerm]['Add']"
               [routerLink]="dropDownList[mainPerm]['Add']">Add New  (<fa name="plus"></fa>)</a>
          </div>
        </li>
      </span>
    </ul>

    <!--This pushes the right side to the right-->

    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown" *ngIf="totalValues.name">
        <a class="nav-link dropdown-toggle" href="#" id="settings" role="button" data-toggle="dropdown"
           aria-haspopup="true" aria-expanded="false">
          <span [class]="network">{{totalValues?.name}} <fa name="cog"></fa></span>
        </a>

          <div class="dropdown-menu" aria-labelledby="settings">
            <a class="dropdown-item" routerLink="/">Edit Profile</a>
            <a class="dropdown-item" routerLink="/">Change Password</a>
            <a class="dropdown-item" (click)="logout()">Log Out</a>
          </div>

      </li>

    </ul>

    <!-- All navigation links come until here-->
  </div>



</nav>

相关的打字稿文件：

constructor(private db: AngularFireDatabase, private navbar: NewNavbarService, private user: NewUsersService) {
    this.userDetails = this.user.appUser$.subscribe(value => {
      this.totalValues = value;
      this.changeNavDetails(this.totalValues.permission);
      this.loggedIn = true;  <--- Tried to use *ngIF to control it in the html
    });

Answer 1

快速提示：您可以在变量上使用问号，因此它将仅引用已定义的对象。 例如：

<div>{{user?.name}}</div>