Question

<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;
  }

}

Answer 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

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

1 个答案: