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