angular - ngIf 语句在 Ionic 4 中执行多次

Question

我正在使用 ionic 4，但在使用 ngIf 指令时遇到问题。问题是 ngIf 指令语句被执行了多次。注意 *ngIf="isLoggedIn()"。

我在 tab3.page.html 中有这个

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab Three
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <div *ngIf="isLoggedIn()">
      <div class="ion-padding">
        <ion-button expand="block" type="submit" class="ion-no-margin" routerLink="/tabs/tab3/register">Sign up</ion-button>
        <br>
        <ion-button expand="block" type="submit" class="ion-no-margin" routerLink="/tabs/tab3/login">Log in</ion-button>
      </div>
    </div>
    <!-- <div *ngIf="isLoggedIn()">
      You are logged in
    </div> -->
    <p *ngIf="isTrue()">
      Paragraph. True.
    </p>
  </ion-card>
</ion-content>

我在 tab3.page.ts

中有这个

isLoggedIn(): boolean {
    console.log('isLoggedIn called');
    let logged: boolean = false;
    return logged;
    // this.authService.loggedIn()
    // .then( val => {
    //   logged = val;
    // });
    // return logged;
  }

  isTrue() {
    console.log('isTrue() called');
    return true;
  }

在浏览器控制台中，这是输出

谁能解释这种通过 ngIf 指令多次调用 isLoggedIn() 和 isTrue() 的行为？

Answer 1

Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

Structural directives

*ngIf 每次都会检查您传入的数据是真还是假。因此，在您的情况下，它多次调用 isLoggedIn() 或 isTrue() 来检查结果是否已更改。