Question

无法读取未定义的属性“backdrop”

2017-08-14

54361

angular typescript bootstrap-modal

这是我在 HTML 页面中使用的代码。在我的角度模块中，我导入了所有相关内容。但由于背景，总是显示此错误。请帮忙。我对这个背景一无所知。如果有人可以解释一下这个错误是什么以及为什么会出现？

<div class="animated fadeIn">
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-header">
              <i class="fa fa-align-justify"></i> Bootstrap Modals
            </div>
            <div class="card-block">
              <!-- Button trigger modal -->
              <button type="button" class="btn btn-secondary" data-toggle="modal" (click)="smallModal.show()">
        Launch small modal
      </button>
            </div>
          </div>
        </div>
        <!--/.col-->
      </div>
      <!--/.row-->
    </div>

    <div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Modal title</h4>
            <button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
          </div>
          <div class="modal-body">
            <p>One fine body&hellip;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="smallModal.hide()">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

这是我的 .ts 文件

import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap/modal/modal.component';

@Component({
  selector: 'app-mso-user-profile',
  templateUrl: './mso-user-profile.component.html',
  styleUrls: ['./mso-user-profile.component.css']
})
export class MsoUserProfileComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

触发模式 ID 和模式 ID 不存在。

您的代码 1

<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="smallModal.show()">

我建议 1

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" **data-target="#YourModalName"**>Launch demo modal</button>

您的代码 2

<div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

我建议 2

<div class="modal fade" **id="YourModalName"** tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Answer 2

如果您尝试通过工厂动态加载组件，如下所示：

const factory = this.resolver.resolveComponentFactory(YOURModalComponent);
const componentRef = this.fileAttacherContainer.createComponent(factory);
const component = componentRef.instance;

您必须等到工厂解析器完成组件创建，我的意思是当组件尚未创建时，ngx-bootstrap 背景初始化不会被调用，例如，如果您像下面一样调用显示模式，一切都会顺利进行：

setTimeout(() => {
    component.show();
}, 2000); //any millisecond

但是，不要忘记这是一个糟糕的解决方案，但我告诉您是为了让您更好地理解。

最后，好的解决方案是使用 Promises 或简单地在子组件的 ngAfterViewInit 中调用 component.show(); 。

顺便说一句，也请阅读这篇文章： https://angular.io/api/core/AfterViewChecked

Answer 3

导入此类：

// RECOMMENDED
import { ModalModule } from 'ngx-bootstrap/modal';
// or
import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}