Bootstrap 模态弹出组件在单击 angular formly 元素时不起作用

Question

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

我遵循的演示 link : Bootstrap modal Stackblitz Demo

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

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

正式与 angular 合作时如何纠正这个问题？

以下是代码片段：

多选表单组件

@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 在你的函数 (openModal) 的上下文中，是你在 fields 对象中定义的 field ，它没有你注入组件的 modalService 服务，为了克服这个问题，你可以使用 lambda 表达式：

  openModal: () => {
    this.modalRef = this.modalService.show(CalenderComponent, {
      initialState: {
        title: "Modal title"
      }
    });
  }

这会按照您的意愿保留闭包，您可以阅读更多相关信息here

解决了那个问题后，你将面临另一个问题：

为了解决这个问题，您需要将 CalenderComponent 作为入口组件添加到您的应用程序模块文件 (app.module.ts):

entryComponents: [CalenderComponent]

这是一个分叉的工作stackblitz

Bootstrap 模态弹出组件在单击 angular formly 元素时不起作用

Bootstrap Modal popup component not working on click of angular formly element

javascript

angular

ngx-formly