Как открыть мод начальной загрузки с помощью ngIf - PullRequest
Новая
       41

Как открыть мод начальной загрузки с помощью ngIf

0 голосов
/ 24 января 2019

потерпи, я новичок Я пытаюсь открыть модал начальной загрузки с условием 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' });
  }

}

и вот фактический модальный компонент: 

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>

это определенно вызывает модальное открытие, так как на заднем плане становится темнее, но фактический html-модал не рендерится из-за условия ngIf, которое должно работать, потому что я создаю новый экземпляр художественного произведения, когда я нажмите на кнопку!

1 Ответ

0 голосов
/ 24 января 2019

Вызовите ваш метод в ловушке жизненного цикла, чтобы получить реальный объект Artwork

ngOnInit() {
   this.startAddingArtwork()    
}

Выше кода создаст объект художественного произведения, и условие ngIf будет истинным

...