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

我正在使用 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() 的行为？

最佳答案

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

关于angular - 在 Ionic 4 中多次执行 ngIf 语句，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59629380/