Почему мое угловое событие пропускается, а модальное не открывается? - PullRequest
Новая
       6

Почему мое угловое событие пропускается, а модальное не открывается?

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

У меня есть кнопка добавления, которая открывает модал, который содержит форму для заполнения. Однако по какой-то причине он полностью пропускает излучение события, и модальное окно открыто только наполовину, то есть фон темнеет, но фактического модального поля там нет.

вот моя кнопка add.component 

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

import { Artwork, ArtworkService } from '../../../_services/artwork.service';
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>();
  artworkList: Artwork[];

  constructor(
    private addModalService: NgbModal
  ) { }

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

это передается этому компоненту: 

<app-artwork-list #list (add)="input.startAddingArtwork()" (edit)="input.startEditingArtwork($event)"></app-artwork-list>
<app-artwork-input #input (ok)="list.refresh()"></app-artwork-input>

и эффекты должны быть в модальном компоненте: 

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

  startEditingArtwork(id: number) {
    console.log('start editing artwork ' + id);
    this.artworkService.retrieve(id).then(
      artwork => this.artwork = artwork
    );
  }
}
...