角 | Bootstrap - 模态不显示

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>

Above is my html, nothing happens when I click on the image that I am using as my modal trigger. This started when I add the ngIf="isModalShowing" function. Below is my typescript.

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

This might help you as you are using pure bootstrap .

pay attention to [ngClass] in app.component.html file

I added modal-backdrop class to the class list that gives a visual indication of an active modal.

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

---

Or else use ng-bootstrap that has better ways of doing this

Documentation

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

Running Example

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