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

Question

这是我在 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

导入这个类：

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

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