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è)問題:
為了克服這個(gè)問題,您需要CalenderComponent
在應(yīng)用程序模塊文件 (?app.module.ts
) 中添加作為入口組件:
entryComponents:?[CalenderComponent]
這是一個(gè)分叉的工作stackblitz
添加回答
舉報(bào)
0/150
提交
取消