angular - ngx-bootstrap Bootstrap4: モーダルを閉じた後もまだそこにある

Question

Bootstrap 4 で ngx-bootstrap を使用すると問題が発生します。モーダルを正常に開いた後、モーダルを閉じると、ページ全体が背景で覆われ、アプリが使用できなくなります。

モーダルを開くときに設定パラメータ {backdrop: false } を使用すると...閉じると背景は表示されませんが、body 要素が modal-open クラスを取得するため、アプリはまったく使用できなくなります。

コードがあります：

コンポーネント: product-list.component.ts

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';

import { config } from '../config'
import { ProductService } from '../product/product.service';
import { Product } from '../product/product';

@Component({
    selector: 'app-product-list',
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.css'],
    providers: [ProductService, BsModalService]
})

export class ProductListComponent implements OnInit {

    loadedProducts: Array<Product> = [];

    public modalRef: BsModalRef;

    constructor(
        private productService: ProductService,
        private modalService: BsModalService) {
    }

    ngOnInit() {

        this.productService.loadProductList().then(
            serverProducts => this.loadedProducts = serverProducts);

    }

    deleteButtonClicked(product2BeDeleted: Product,
        confirmDeleteModalTemplate: TemplateRef<any>): void {

        if (config.showConfirmDeleteModal) {
            this.modalRef = this.modalService.show(confirmDeleteModalTemplate);
        }

    }

}

コンポーネント テンプレート: product-list.component.html

<div class="card">
    <div class="card-block">

        <h4 class="card-title">Listado de productos</h4>

        <div *ngIf="loadedProducts.length == 0" class="alert alert-warning" role="alert">
            <span class="fa fa-warning"></span> No hay productos disponibles
        </div>

        <table *ngIf="loadedProducts.length > 0" class="table table-striped">

            <thead class="thead-inverse">
                <tr>
                    <th></th>
                    <th>SKU</th>
                    <th>Nombre</th>
                    <th>Precio</th>
                </tr>
            </thead>

            <tbody>

                <tr *ngFor="let productRow of loadedProducts">

                    <td>
                        <a [routerLink]="['/product/', productRow.id]" title="Editar este producto"
                            class="btn btn-sm btn-primary">
                            <span class="fa fa-pencil"></span>
                        </a>

                        <button title="Eliminar este producto"
                            (click)="deleteButtonClicked(productRow, confirmDeleteModalTemplate)"
                            class="btn btn-sm btn-danger">
                            <span class="fa fa-trash"></span>
                        </button>
                    </td>

                    <td>{{productRow.sku}}</td>
                    <td>{{productRow.name}}</td>
                    <td>{{productRow.price}}</td>
                </tr>

            </tbody>

        </table>

        <ng-template #confirmDeleteModalTemplate>
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteModalLabel">Confirmar eliminación de un producto</h5>
                <button type="button" class="close" aria-label="Cerrar" (click)="modalRef.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <p>Estas a punto de eliminar este producto:</p>
                    <ul>
                        <li></li>
                    </ul>
                <p><strong>¡Ten en cuenta que esta acción no se puede deshacer!</strong></p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" (click)="modalRef.hide()">Cancelar</button>
                <button type="button" class="btn btn-primary">Eliminar</button>
            </div>
        </ng-template>

    </div>
</div>

誰かが私を助けてくれることを願っています。解決策が見つかりませんでした。ngx-bootstrap doc のデモにできるだけ近づけようとしていますが、... 方法はありません。

前もって感謝します！！