Angular 如何使用ngIf打开引导模式

请容忍我，我是初学者！我正在尝试打开一个具有ngIf条件的引导模式。也就是说，如果存在对象艺术品，则应打开模式以添加其他艺术品

下面是我的添加按钮组件，它也会触发事件：

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

}

从'@angular/core'导入{Component，OnInit，Output，EventEmitter}；
从'@ng bootstrap/ng bootstrap'导入{NgbModal，NgbActiveModal}；
从“../add-art-modal/add-art-modal.component”导入{AddArtModalComponent}；
@组成部分({
选择器：“应用程序添加艺术按钮”，
templateUrl:'./添加艺术按钮.component.html'，
样式URL:['./添加艺术按钮.component.css']
})
导出类AddArtButtonComponent实现OnInit{
@Output（）private add=new EventEmitter（）；
@Output（）private edit=new EventEmitter（）；
建造师(
私有addModalService:NgbModal
) { }
恩戈尼尼特（）{
}
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();
  }
}

从'@angular/core'导入{Component，OnInit，Output，EventEmitter}；
从'@ng bootstrap/ng bootstrap'导入{NgbModal，NgbActiveModal}；
从“../../../../\u services/Artwork.service”导入{Artwork，ArtworkService}；
@组成部分({
选择器：“应用程序添加艺术模式”，
templateUrl:'./添加艺术模式.component.html'，
样式URL:['./添加艺术模式.component.css']
})
导出类AddArtModalComponent实现OnInit{
@Output（）确定=新的EventEmitter（）；
@Output（）cancel=neweventemitter（）；
艺术品：艺术品；
建造师(
公共活动模式：NgbActiveModal，
私人艺术品服务：艺术品服务
) { }
恩戈尼尼特（）{
}
startAddingArtwork（）{
log（“开始添加艺术品”）；
this.artwork=新的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不会被渲染，这应该可以工作，因为我在单击按钮时确实创建了一个新的艺术品实例

在lifecycle hook中调用您的方法，以获得创建

艺术品的实际对象

ngOnInit() {
   this.startAddingArtwork()    
}

上面的代码将创建artwork对象，并且
ngIf
条件将为true
您忘记在lifecycle Hook中调用startAdingWork（）方法。我得到错误startAdingArtwork（）由于某种原因未定义。但不管怎样，单击addArtwork（）后，条件不应该设置为true吗？因为这会发出事件，触发模态组件中的StartAdingArtwork（）？很抱歉，忘记使用此调用。StartAdingArtwork（）；如果这解决了你的问题，请接受答案，这样其他人就会从中受益