angular - 为什么 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

如果您的绑定(bind)中有一个方法，则每次更改检测运行时都会调用它。

如果您需要通过单击另一个父按钮来更新父按钮，请尝试以下操作:

模板:

<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">

子组件.html

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

子组件.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();
    }
  }
}

链接到代码和框: https://codesandbox.io/s/1y4wnz423