亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Bootstrap 模態彈出組件在單擊角度形式元素時不起作用

Bootstrap 模態彈出組件在單擊角度形式元素時不起作用

HUX布斯 2024-01-18 09:52:45
我有一個要求,其中我使用角度形式的多選,每行也有徽標。單擊此徽標時,我想加載模態彈出組件,我正在遵循 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'       }  }); },  }}
查看完整描述

1 回答

?
精慕HU

TA貢獻1845條經驗 獲得超8個贊

如果您對此進行調試,您可以看到在函數 ( )this的上下文中,是您在對象中定義的,該對象沒有您注入到組件中的服務,為了克服這個問題,您可以使用 lambda 表達式:openModalfieldfieldsmodalService


? openModal: () => {

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

? ? ? initialState: {

? ? ? ? title: "Modal title"

? ? ? }

? ? });

? }

這可以使關閉保持如您所愿

解決了這個問題之后,你又會面臨另一個問題:

https://img1.sycdn.imooc.com/65a8849d0001827a07830066.jpg

為了克服這個問題,您需要CalenderComponent在應用程序模塊文件 (?app.module.ts) 中添加作為入口組件:

entryComponents:?[CalenderComponent]

這是一個分叉的工作stackblitz


查看完整回答
反對 回復 2024-01-18
  • 1 回答
  • 0 關注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號