角度|引导程序-模式未显示

时间:2020-02-18 00:43:46

标签: html angular typescript bootstrap-4

<img id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='assets/barrel.jpg' alt='Text dollar code part one.' />
<div id="myModal" class="modal fade" *ngIf="isModalShowing">
  <div class=" modal-lg center">
    <div class="modal-header">
      <button type="button" class="close" (click)="toggleModal()">&times;</button>
      <div class="modal-content">
        <div class="modal-body">
          <img id="1" src="assets/barrel.jpg" class="img-responsive">
          <img id="2" src="assets/car.jpg" class="img-responsive">
        </div>
      </div>
    </div>
  </div>
</div>

以上是我的html,当我单击用作模态触发器的图像时,什么也没有发生。这在我添加ngIf =“ isModalShowing”函数时开始。下面是我的打字稿。

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgModule } from '@angular/core';

@Component({
  selector: 'app-portfolio',
  templateUrl: './portfolio.component.html',
  styleUrls: ['./portfolio.component.scss']
})
export class PortfolioComponent implements OnInit {

  constructor() { }

  public ngOnInit() {

  }

  isModalShowing: boolean;

  toggleModal() {
    this.isModalShowing = !this.isModalShowing;
  }

}

1 个答案:

答案 0 :(得分:1)

这可能会帮助您 使用纯自举程序

注意 app.component.html 文件

中的[ngClass]

我在类列表中添加了 modal-backdrop 类,该类可以直观地指示活动模式。

https://stackblitz.com/edit/angular-jggbzx


或者使用具有更好方法的 ng-bootstrap

文档

https://ng-bootstrap.github.io/#/components/modal/examples

运行示例

https://stackblitz.com/edit/angular-dwqv1u