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

Question

我正在尝试根据存储中是否存在值或设置为特定值来添加一个类。我正在尝试为此使用 [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 或代表单个级别的“单元格”。有 27 个级别并且永远不会改变，因此这些级别是页面上的静态元素（不是动态加载的）。每个级别（第一级除外）最初都是锁定的。完成一个关卡将解锁下一个关卡。或者，可以使用游戏内货币解锁关卡。所以我需要检查本地存储，如果关卡没有数据，或者关卡状态为锁定，我需要设置锁定类。如果已解锁，请不要应用锁定的类。

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

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();
    }
  }
}

codeandbox 链接：https://codesandbox.io/s/1y4wnz423