第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

Bootstrap 模態(tài)彈出組件在單擊角度形式元素時(shí)不起作用

Bootstrap 模態(tài)彈出組件在單擊角度形式元素時(shí)不起作用

HUX布斯 2024-01-18 09:52:45
我有一個(gè)要求,其中我使用角度形式的多選,每行也有徽標(biāo)。單擊此徽標(biāo)時(shí),我想加載模態(tài)彈出組件,我正在遵循 Stackblitz 演示,以便在單擊元素時(shí)調(diào)用 app.component 中的模態(tài)組件。我關(guān)注的演示鏈接: Bootstrap modal Stackblitz Demo我正在實(shí)施的解決方法演示如下:解決方法演示 Stackblitz我使用openModal()函數(shù)單擊徽標(biāo)時(shí)遇到的錯(cuò)誤是未定義的對(duì)象。在正式使用角度時(shí)如何糾正這個(gè)問題?以下是代碼片段:多選形式組件@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,其中調(diào)用模態(tài)組件(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貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊

如果您對(duì)此進(jìn)行調(diào)試,您可以看到在函數(shù) ( )this的上下文中,是您在對(duì)象中定義的,該對(duì)象沒有您注入到組件中的服務(wù),為了克服這個(gè)問題,您可以使用 lambda 表達(dá)式:openModalfieldfieldsmodalService


? openModal: () => {

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

? ? ? initialState: {

? ? ? ? title: "Modal title"

? ? ? }

? ? });

? }

這可以使關(guān)閉保持如您所愿

解決了這個(gè)問題之后,你又會(huì)面臨另一個(gè)問題:

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

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

entryComponents:?[CalenderComponent]

這是一個(gè)分叉的工作stackblitz


查看完整回答
反對(duì) 回復(fù) 2024-01-18
  • 1 回答
  • 0 關(guān)注
  • 145 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)