javascript - Angular: Bootstrap 背景在不应该显示的时候显示

Question

所以我正在对我的应用程序进行错误处理，并且我想在出现错误时弹出一个 Bootstrap 模式。

起初我希望我的背景和错误模式显示“无”。当出现错误时，我希望弹出背景+错误模式。我可以在加载网页时隐藏模式，但不幸的是背景没有隐藏(有深灰色背景，我什至无法单击它使其消失。有人能看出为什么吗？模式和背景元素两者都具有链接到错误组件属性的相同“[ngStyle]="{'display': display}"'。

error.component.ts

import {Component, OnInit} from "@angular/core";
import {ErrorService} from "./error.service";

@Component({
    selector: 'app-error',
    templateUrl: './error.component.html',
    styles: [`
        .backdrop {
            background-color: rgba(0, 0, 0, 0.6);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
        }
    `]
})

export class ErrorComponent implements OnInit {
    error: Error;
    displayed = 'none'

    constructor(private errorService: ErrorService) {

    }

    onErrorHandled() {
        this.display = 'none'
    }

    ngOnInit() {
        this.errorService.errorOccurred.subscribe(
            (error: Error) => {
                this.error = error;
                this.display = 'block';
            }
        );
    }
}

error.component.html

<div class="backdrop" [ngStyle]="{'display': display}"></div>
<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display': display}">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close" (click)="onErrorHandled()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{ error?.title }}</h4>
            </div>
            <div class="modal-body">
                <p>{{ error?.message }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" (click)="onErrorHandled()">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

也许是因为你有 2 个变量“displayed”和“display”