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或＆＃39; cell＆＃39;代表单一级别。有27个级别，永远不会改变，因此级别是页面上的静态元素（不动态加载）。每个级别（第一级除外）最初被锁定。完成一个级别将解锁下一个级别。或者，可以使用游戏货币解锁等级。因此，如果级别没有数据，或者级别的状态为locked，我需要检查本地存储并设置锁定的类。如果它已解锁，请不要应用锁定的类。

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

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

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

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

1 个答案: