“模态容器组件”类型上不存在属性“显示”答案

【问题标题】：Property 'show' does not exist on type 'ModalContainerComponent'“模态容器组件”类型上不存在属性“显示”
【发布时间】：2020-06-05 14:37:29
【问题描述】：

我正在使用 MDB 模型，即 ModalContainerComponent 在屏幕上显示弹出窗口。

我将在某些 if 条件下显示弹出窗口。

但是modelpopup.show()会抛出错误

有人可以帮我解决这个问题吗？

这是我的 .ts 代码

import { Component, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
import { ModalContainerComponent } from 'angular-bootstrap-md';
import { Router } from '@angular/router';
import { BlockUI, NgBlockUI } from 'ng-block-ui';
import 'select2';
import 'jquery-validation-unobtrusive';
import { JWTHelperUtility } from 'src/app/shared/helper';
import { ToastrService } from 'ngx-toastr';
import { HttpErrorResponse } from '@angular/common/http';

export class AccountConfigComponent implements OnInit {
  @ViewChild('conflictBasicModal', { static: true }) conflictBasicModal: ModalContainerComponent;
  
  checkAccountClientConflicts(res) { 
    this.accountConflicts = JSON.parse(res);
    if(this.accountConflicts.length > 0)
    {
      this.conflictBasicModal.show();
    }
    else
    {
      this.accountParams.excludedAccounts='';
      this.onPopupSubmit();
    }
  }
  }

但是，类的定义不包含 show() 方法。

import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { ModalOptions } from './modal.options';
export declare class ModalContainerComponent implements OnInit, OnDestroy {
    private _renderer;
    modalClass: string;
    tabindex: number;
    role: string;
    modal: boolean;
    private mdbModalService;
    config: ModalOptions;
    isShown: boolean;
    level: number;
    isAnimated: boolean;
    protected _element: ElementRef;
    private isModalHiding;
    private utils;
    onClick(event: any): void;
    onEsc(): void;
    onKeyDown(event: any): void;
    constructor(options: ModalOptions, _element: ElementRef, _renderer: Renderer2);
    ngOnInit(): void;
    focusModalElement(): void;
    updateContainerClass(): void;
    ngOnDestroy(): void;
    hide(): void;
 }

【问题讨论】：

checkAccountClientConflicts 是从哪里调用的？
@KurtHamilton 在服务调用后调用。一旦一些数据来自 API，observable 就会将其传递给这个方法。

标签： angular typescript bootstrap-4 bootstrap-modal

【解决方案1】：

您在组件中将模态声明为错误的类型。

应该是ModalDirective，而不是ModalContainerComponent。您已经在 HTML 中声明了该指令，这就是您挂钩其方法的方式。

@ViewChild('conflictBasicModal', { static: true }) 
modal: ModalDirective;

showModal() {
  this.modal.show();
}

演示：https://stackblitz.com/edit/angular-8i6to4

我通过阅读官方文档找到了正确的类型：https://mdbootstrap.com/docs/angular/modals/basic/#a-directives

【讨论】：