Javascript Ionic 4基本ngClass未按预期工作

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

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

然后在运行时，我尝试这样更改它，但什么也没有发生：

this.step2Inactive = false;

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

我使用的是Ionic 4和Angular 8.1.2

全班：

    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>

加兰蒂
Kostenpflichtig
射频识别扫描
二维码扫描
1.
RFID zum scannen berühren
2.
阿尔蒂克努默尔坎特酒店
3.
达滕·沃登·格拉登

如果有人遇到以下问题，请发布解决方案： 基本上，在订阅之后，我试图在“角度区域”之外更改变量。因此，更改不会影响DOM

---

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

我想我们需要看更多的代码。目前，有很多零碎的东西，我不认为我们可以仅仅基于这一点提供帮助。例如1。您在什么环境下更改此变量？2.你的.css类正确吗？3.所有这些都发生在单个组件中吗？我为.ts文件添加了完整的代码块。这一切都发生在一页纸上。添加完整的HTML。只是删除了一些不必要的部分，如ion标题的内容和前几张幻灯片，以使其保持较小的规模，这并不完全是我的意思。您将需要创建一个。有关更多信息，请参阅并使用.Ok将其分解为尽可能少的代码，同时仍保留逻辑。希望这有帮助。基本上，所有重要的事情都发生在startRFID（）函数中。该函数按预期运行，只是不更新任何类。类似于此行

setTimeout（（）=>{this.step2Inactive=false；}，1000）将变量设置为false。你在哪里把它设置为真？
<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>