从ngx-chips（标签输入）中选择项目时Angular2 +打开模态答案

【问题标题】：Angular2+ Open Modal when item selected from ngx-chips (tag-input)从ngx-chips（标签输入）中选择项目时Angular2 +打开模态
【发布时间】：2020-02-04 14:39:34
【问题描述】：

当我选择标签输入下拉菜单中的一个标签时，我想打开一个模式窗口。

这是我的代码：

<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

有人可以帮我吗？

【问题讨论】：

标签： angular typescript modal-dialog ngx-chips

【解决方案1】：

您需要在标签输入选择器中添加（onSelect）方法，然后您可以在其定义中打开模式弹出窗口。

【讨论】：