为什么 ngClass 无限期地调用函数？

Question

我正在尝试根据某个值是否存在于存储中或是否设置为特定值来添加 class。我正在尝试为此使用 [ngClass]。出于某种原因，我检查存储的函数被无限调用。是什么导致了这种行为，我该如何阻止它？

我的 html 文件中的一个用法示例：

<div id="level2" class="cell middle" [ngClass]="{'locked': checkLevel(2)}">

checkLevel 函数：

checkLevel(level): any{
        console.log("checkLevel(" + level + ")");
        var result = this.storage.getLevel(level.toString());
        console.log(result);
        if (result == null || result['status'] == 'locked'){
            return true;
        } else {
            return false;
        }
    }

getLevel 函数：

getLevel(level:string):any{
        console.log("Inside getLevel.");
        this.storage.get('games' + level).then((val) => {
            console.log(val);
            return val;
        });
    }

输出到控制台：

checkLevel(10)
storage.ts:20 Inside getLevel.
levels.ts:28 undefined
levels.ts:26 checkLevel(11)
storage.ts:20 Inside getLevel.
levels.ts:28 undefined
levels.ts:26 checkLevel(12)
storage.ts:20 Inside getLevel.
levels.ts:28 undefined
levels.ts:26 checkLevel(13)
storage.ts:20 Inside getLevel.
levels.ts:28 undefined
levels.ts:26 checkLevel(14)
storage.ts:20 Inside getLevel.
levels.ts:28 undefined

而且它会一直这样做下去。循环遍历我使用 [ngClass] 的所有地方。实际级别页面永远不会显示。

--上下文更新--

我在一个包含 3 张幻灯片的滑块的页面上使用它。每张幻灯片包含 9 个 div 或 'cells'，代表一个级别。有 27 个级别并且永远不会改变，因此级别是页面上的静态元素（不是动态加载的）。每个级别（第一级除外）最初都是锁定的。完成一个级别将解锁下一个级别。或者，可以使用游戏内货币解锁关卡。所以我需要检查本地存储并设置锁定 class 如果关卡没有数据，或者关卡处于锁定状态。如果已解锁，请不要应用锁定的 class.

我只需要一些方法来根据返回的关卡数据动态更改 classes。

Answer 1

如果您的绑定中有方法，则每次运行更改检测时都会调用该方法。

如果您需要通过点击另一个父按钮来更新父按钮，试试这个：

模板：

<button (click)="updateLockClass()">Click to update</button>
<button type="button" [ngClass]="lockClass">Button with "lockClass</button>

应用组件：

export class AppComponent {
  lockClass = "";

  checkClass(num) {
    return num == 2;
  }

  updateLockClass() {
    this.lockClass = this.checkClass(2) ? "lockClass2" : "lockClass";
  }
}

如果您需要通过更新解析为子组件的父值来更新子按钮，试试这个：

父组件：

<app-child [childMessage]="parentMessage"></app-child>
    <input [(ngModel)]="parentMessage">

child.component.html

<button type="button" [ngClass]="childClass">Child Button with "childClass"</button>

child.component.ts

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({
  selector: "app-child",
  templateUrl: "./child.component.html",
  styleUrls: ["./app.component.css"]
})
export class ChildComponent implements OnChanges {
  childClass = "";
  @Input() childMessage: string;

  checkClass(num) {
    return num == 2;
  }

  updateChildClass() {
    this.childClass = this.checkClass(2) ? "lockClass3" : "lockClass";
  }

  constructor() {
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('Change detected:', changes.childMessage);
    if (changes.childMessage.currentValue != "Change parent value!") {
      this.updateChildClass();
    }
  }
}

Link 到 codesandbox: https://codesandbox.io/s/1y4wnz423

为什么 ngClass 无限期地调用函数？

Why is ngClass calling function indefinitely?

angular

ionic-framework

ionic3

ng-class