Ionic 4 basic ngClass 没有按预期工作

Question

可能是初学者的问题，但我真的被困在这里了。只是尝试切换我添加到 HTML 的元素的 class，如下所示：

<ion-card [ngClass]="{
   'inactive': step2Inactive,
   'button-card': true
}">

它应该总是有按钮卡 class 和一个可切换的非活动状态 class。

在我的 TS 文件中初始化 class 顶部的参数，就像在构造函数上方这样：

protected step2Inactive: boolean = true;

然后在运行时我尝试像这样更改它，但没有任何反应：

this.step2Inactive = false;

最后一部分包含在一些函数和超时中，我会不会失去 "this" 的焦点？抱歉，这可能是一个非常基本的问题，但我找不到任何解决方案：/

我正在使用 Ionic 4 和 Angular 8.1.2

完整 Class:

    import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
    import { HTTP } from '@ionic-native/http/ngx';
    import { NFC } from '@ionic-native/nfc/ngx';
    import { Vibration } from '@ionic-native/vibration/ngx';
    import { Platform, AlertController, IonRadioGroup, NavController, ToastController, IonCard } from '@ionic/angular';

    @Component({
        selector: 'app-repair',
        templateUrl: './repair.page.html',
        styleUrls: ['./repair.page.scss'],
    })
    export class RepairPage implements OnInit {

        protected stepsHidden: boolean = false;
        protected step2Inactive: boolean = true;
        protected step3Inactive: boolean = true;
        protected spinnerHidden: boolean = true;
        protected resultContainerHidden: boolean = true;

        constructor(
            private http: HTTP,
            private platform: Platform,
            private nfc: NFC,
            private vibration: Vibration,
            private alertController: AlertController,
            private navCtrl: NavController,
            private tstCtrl: ToastController,
        ) {}

        ngOnInit() {
        }

        ionViewDidEnter() {
            this.slides.lockSwipeToNext(true);
            this.slideParams[0] = 'rfid';
            this.slideParams[1] = 'guarantee';
            this.startRFID();
        }
        startRFID() {
            let listener = this.nfc.addNdefListener(() => {
                console.log('connected ndef listener')
            }, (err) => {
                console.log('error attaching ndef listener', err);
            }).subscribe((event) => {
                this.spinnerHidden = false;
                this.resultContainerHidden = true;
                setTimeout(() => {
                    this.step2Inactive = false;
                }, 1000);
                setTimeout(() => {              
                    this.step3Inactive = false;
                }, 2000);
                setTimeout(() => {
                    this.spinnerHidden = true;
                    this.stepsHidden = true;
                    this.resultContainerHidden = true;
                }, 3000);
            })
        }
    }

完整 HTML 文件：

<ion-header>
</ion-header>
<ion-content>
    <ion-slides #slides [options]="slideOpts">
        <ion-slide class="slide-2">
            <ion-row>
                <ion-col size="12">
                    <h3 *ngIf="this.slideParams[1] == 'guarantee'">Garantie</h3>
                    <h3 *ngIf="this.slideParams[1] == 'costs'">Kostenpflichtig</h3>
                    <h3 *ngIf="this.slideParams[0] == 'rfid'">RFID Scan</h3>
                    <h3 *ngIf="this.slideParams[0] == 'qr'">QR Code Scan</h3>
                </ion-col>
            </ion-row>
            <div *ngIf="this.slideParams[0] == 'rfid'" [ngClass]="{'hidden': this.stepsHidden}">
                <ion-card class="button-card">
                    <ion-row>
                        <ion-col size="1">
                            <h3>1</h3>
                        </ion-col>
                        <ion-col class="ion-align-self-center" size="10">
                            <ion-text color="#606368">RFID zum scannen berühren</ion-text>
                        </ion-col>
                    </ion-row>
                </ion-card>
                <ion-card [ngClass]="{
                    'inactive': step2Inactive,
                    'button-card': true
                }">
                    <ion-row>
                        <ion-col size="1">
                            <h3>2</h3>
                        </ion-col>
                        <ion-col class="ion-align-self-center" size="10">
                            <ion-text color="#606368">Artikelnummer erkannt</ion-text>
                        </ion-col>
                    </ion-row>
                </ion-card>
                <ion-card [ngClass]="{
                    'inactive': this.step3Inactive,
                    'button-card': true
                }">
                    <ion-row>
                        <ion-col size="1">
                            <h3>3</h3>
                        </ion-col>
                        <ion-col class="ion-align-self-center" size="10">
                            <ion-text color="#606368">Daten werden geladen</ion-text>
                        </ion-col>
                    </ion-row>
                </ion-card>
            </div>
            <ion-row #spinner [ngClass]="{
                'hidden': spinnerHidden
            }" *ngIf="this.slideParams[0] == 'rfid'">
                <ion-col>
                    <ion-spinner color="danger" class="ion-align-self-center"></ion-spinner>
                </ion-col>
            </ion-row>
            <ion-card #result_container [ngClass]="{
                'hidden': resultContainerHidden,
                'ion-padding-horizontal': true
            }" (click)="openCard()">
            </ion-card>
        </ion-slide>
    </ion-slides>
</ion-content>
<ion-footer>
    <footer-nav-bar></footer-nav-bar>
</ion-footer>

Answer 1

如果有人遇到这个问题，请发布解决方案：基本上我试图在订阅后更改 "angular zone" 之外的变量。因此，更改不会影响 DOM.

完整的解释和代码可以在这里找到：

Ionic 4 basic ngClass 没有按预期工作

Ionic 4 basic ngClass not working as expected

javascript

ng-class

ionic-framework

angular

ionic4