Angular2 + Open Modal, когда элемент выбран из ngx-chips (tag-input) - PullRequest
1 голос
/ 07 октября 2019

Я хотел бы открыть модальное окно, когда я выбираю один из тегов, присутствующих в моем раскрывающемся списке ввода тегов.

Это мой код:

<div class="force-to-the-bottom">
  <tag-input [ngModel]="[]" [onAdding]="onAdding">
    <tag-input-dropdown
      [autocompleteItems]="items"
      [showDropdownIfEmpty]="true"
      [dynamicUpdate]="false"
    >
    </tag-input-dropdown>
  </tag-input>
</div>


<ng-template #content1 let-modal>
    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">My Modal</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <form>
        <div class="form-group">            
            <div class="input-group">
                <input  name="modal-conf" type="text" class="form-control">                
            </div>            
        </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger">Done</button>
    </div>
</ng-template>

Мой тег вводаимеет вызов функции [onAdding] = "onAdding", который вызывает открытие модального окна:

import { Component, OnInit, TemplateRef, ViewChild, } from '@angular/core';
import { Observable, of } from 'rxjs';
import { NgbModal, ModalDismissReasons, } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('content1', {static: false}) content1 !: TemplateRef<any>;
  name = 'Angular';
  closeResult: string;
  public items = [
    {display: 'Pizza', value: 1},
    {display: 'Pasta', value: 2},
    {display: 'Parmesan', value: 3},
  ];

  public onAdding(tag: any): Observable<any> {    
    console.log(tag);
    const confirm = window.confirm('Do you really want to add this tag?');                

    this.modalService.open(this.content1, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {     
        this.closeResult = `Closed with: ${result}`;      
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;      
    });

    return of(tag);        
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }

  constructor(private modalService: NgbModal) { }
}

Я не понимаю почему, модальное окно не открывается. Это мой StackBlitz: https://stackblitz.com/edit/angular-ye2n9g

Может кто-нибудь мне помочь?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...