如何使用 ngIf 打开 bootstrap 模式

Question

请多多包涵，我是初学者！我正在尝试使用 ngIf 条件打开 bootstrap 模态。也就是说，如果存在一个对象艺术品，它应该打开模态以添加另一个艺术品！

这是我的添加按钮组件，它也触发了事件：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { AddArtModalComponent } from '../add-art-modal/add-art-modal.component';


@Component({
  selector: 'app-add-art-button',
  templateUrl: './add-art-button.component.html',
  styleUrls: ['./add-art-button.component.css']
})
export class AddArtButtonComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();

  constructor(
    private addModalService: NgbModal
  ) { }

  ngOnInit() {
  }

  addArtwork() {
    this.add.emit();
    const modalRef = this.addModalService.open(AddArtModalComponent, { size: 'lg' });
  }

}

这里是实际的模态组件：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Artwork, ArtworkService } from '../../../_services/artwork.service';

@Component({
  selector: 'app-add-art-modal',
  templateUrl: './add-art-modal.component.html',
  styleUrls: ['./add-art-modal.component.css']
})
export class AddArtModalComponent implements OnInit {
  @Output() ok = new EventEmitter<Artwork>();
  @Output() cancel = new EventEmitter();
  artwork: Artwork;

  constructor(
    public activeModal: NgbActiveModal,
    private artworkService: ArtworkService
  ) { }

  ngOnInit() {
  }

  startAddingArtwork() {
    console.log('start adding artwork');
    this.artwork = new Artwork();
  }
}

模态的html：

<div *ngIf="artwork">

  <div class="modal-content" tabindex="-1" role="dialog" aria-labelledby="Add New Art" aria-hidden="true">
    <!-- Modal Header -->
    <form novalidate #form="ngForm">
      <div class="modal-header">
        <h5 class="modal-title">Add Artwork</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-4">
              <div class="uploadImage">
                <img src="assets/images/modalPic.jpg" alt="Uploaded Image" class="img-fluid samplePic">
                <!-- <button type="submit" class="imgUploadButton mt-2 ml-5 modalButtons">Upload Image</button> -->
                <!-- <img src="{{artwork.imageBase64}}" alt=""> -->
                <app-image-upload #imageUpload (uploadcompleted)="imageUploadCompleted($event)"></app-image-upload>
              </div>
            </div>
            <div class="col-sm-8">
              <div class="artInfo">
                <!-- <form> -->
                <!-- <div class="row" *ngIf="artwork.id">
                    <div class="col-25">
                      <label for="id">ID:</label>
                    </div>
                     <div class="col-75">
                      <input type="number" [value]="artwork.id" id="id" name="id" readonly>
                    </div>
                  </div> -->
                <div class="form-group">
                  <label for="Art work name">Art Work Name</label>
                  <input type="text" class="form-control" id="title" name="title" required minlength="2" placeholder="Art Work">
                </div>
                <div class="form-row">
                  <label for="Artist Name">Artist Name</label>
                </div>
                <div lass="col">
                  <input type="text" class="form-control" id="firstname" name="firstname" required minlength="2" placeholder="First Name">
                </div>
            <div lass="col">
              <input type="text" class="form-control mt-1" id="lastname" name="lastname" required minlength="2" placeholder="Last Name">
            </div>
            <!-- </div> -->
            <div class="form-row">
              <label for="Artist Name">Location</label>
              <div class="form-row">
                <div class="col">
                  <!-- <button class="getLocationButton ml-1 modalButtons">My Location</button> -->
                  <input type="text" class="form-control ml-1" id="streetNameInput" placeholder="Streetname">
                </div>
                <div lass="col">
                  <input type="number" class="form-control mt-1" id="numberInput" placeholder="Number">
                </div>
                <div class="form-row">
                  <div lass="col">
                    <input type="number" class="form-control mt-1 ml-3" id="zipcodeInput" placeholder="Zipcode">
                  </div>
                  <div lass="col">
                    <input type="text" class="form-control mt-1 ml-3" id="cityInput" placeholder="City">
                  </div>
                </div>
              </div>
            </div>
            <div class="form-row">
              <div class="col">
                <input type="text" class="form-control mt-1" id="longitude" name="longitude" min="0.0" max="360.0" placeholder="Latitude">
              </div>
              <div class="col">
                <input type="text" class="form-control mt-1" id="latitude" name="latitude" min="0.0" max="360.0" placeholder="Longitude">
              </div>
            </div>
          </div>
          <!-- <div class="form-group mt-2">
              <label for="Artist Name">Addtional Information</label> <br>
              <textarea name="name" rows="2" cols="49" class="additionalInfoText"></textarea>
            </div> -->
          <!-- </form> -->
        </div>
      </div>
    </div>
  </div>

  <!-- Modal footer -->

  <div class="modal-footer">
    <button type="button" class="saveArtButton modalButtons">Save</button>
  </div>
</form>
  </div>
</div>

它肯定会触发模态打开，因为背景变暗了，但是由于 ngIf 条件，模态的实际 html 没有被渲染，这应该可以工作，因为我确实创建了一个单击按钮时出现新的图稿实例！

Answer 1

在生命周期挂钩中调用您的方法来创建 Artwork

的实际对象

ngOnInit() {
   this.startAddingArtwork()    
}

以上代码将创建艺术品对象并且ngIf条件为真

如何使用 ngIf 打开 bootstrap 模式

How to open bootstrap modal with ngIf

bootstrap-modal

angular-ng-if

angular