Bootstrap 模态弹出组件在单击角度形式元素时不起作用

Question

我有一个要求，其中我使用角度形式的多选，每行也有徽标。单击此徽标时，我想加载模态弹出组件，我正在遵循 Stackblitz 演示，以便在单击元素时调用 app.component 中的模态组件。

我关注的演示链接： Bootstrap modal Stackblitz Demo

我正在实施的解决方法演示如下：解决方法演示 Stackblitz

我使用openModal()函数单击徽标时遇到的错误是未定义的对象。

在正式使用角度时如何纠正这个问题？

以下是代码片段：

多选形式组件

@Component({

selector: 'formly-field-multiselect',

template: `<br><p-multiSelect  [options]="to.options"

  [formControl]="formControl"

  [formlyAttributes]="field"

  [showClear]="!to.required" >

  <ng-template let-item pTemplate="item">

  <div>{{item.label}}</div>

   <div>

   <i class="pi pi-check" (click)="to.openModal()"></i>

   </div>

  </ng-template>

</p-multiSelect>

`,

})

app.component.ts，其中调用模态组件（calenderComponent）

fields: FormlyFieldConfig[] = [

{

  key: "select",

  type: "multiselect",

  templateOptions: {

    multiple: false,

    placeholder: "Select Option",

    options: [

      { label: "Select City", value: null },

      { label: "New York", value: { id: 1, name: "New York", code: "NY" } },

      { label: "Rome", value: { id: 2, name: "Rome", code: "RM" } },

      { label: "London", value: { id: 3, name: "London", code: "LDN" } },

      {

        label: "Istanbul",

        value: { id: 4, name: "Istanbul", code: "IST" }

      },

      { label: "Paris", value: { id: 5, name: "Paris", code: "PRS" } }

    ],

      openModal() {

         this.modalRef = this.modalService.show(CalenderComponent,  {

         initialState: {

         title: 'Modal title'

       }

  });

 }, 

 }

}

Answer 1

如果您对此进行调试，您可以看到在函数 ( )this的上下文中，是您在对象中定义的，该对象没有您注入到组件中的服务，为了克服这个问题，您可以使用 lambda 表达式：openModalfieldfieldsmodalService  openModal: () => {    this.modalRef = this.modalService.show(CalenderComponent, {      initialState: {        title: "Modal title"      }    });  }这可以使关闭保持如您所愿解决了这个问题之后，你又会面临另一个问题：为了克服这个问题，您需要CalenderComponent在应用程序模块文件 ( app.module.ts) 中添加作为入口组件：entryComponents: [CalenderComponent]这是一个分叉的工作stackblitz