angular - 将数据传递给 Angular ngbModalRef

问题描述

我正在尝试使用 JHipster 学习 Angular。我想使用生成的实体代码弹出窗口（删除实体 - 在我的情况下为 FTPshelf）以不同的方式工作。我希望弹出窗口打印一个动态表单复选框 + auditType entity.name。

无论我做什么它只适用于第一次打开弹出窗口。在我关闭它并再次打开后，实体列表不会填充。

我的代码：

html前端：

<form name="chooseAuditForm" role="form" novalidate (ngSubmit)="audit()" #chooseAuditForm="ngForm"
          (change)="chooseAudit(chooseAuditForm)">
            <div class="col-lg-12 form-inline" *ngFor="let auditType of auditTypes">
                <div class="col-lg-6">{{auditType.name}}</div>
                <div class="col-lg-6"><input id={{auditType.id}} type="checkbox" ngModel name="chosenAudit"
                            class="form-control" value={{auditType}}/></div>
            </div>
    </form>

ts 组件：

@Component({
    selector: 'jhi-ftp-shelf-audit-dialog',
    templateUrl: './ftp-shelf-audit-dialog.component.html'
})
export class FtpShelfAuditDialogComponent {
    ftpShelf: IFtpShelf;

    constructor(private ftpShelfService: FtpShelfService,
                public activeModal: NgbActiveModal,
                private eventManager: JhiEventManager) {
    }

    clear() {
        this.activeModal.dismiss('cancel');
    }

    confirmAudit(id: number) {
        this.ftpShelfService.delete(id).subscribe(response => {
            this.eventManager.broadcast({
                name: 'ftpShelfListModification',
                content: 'Audit an ftpShelf'
            });
            this.activeModal.dismiss(true);
        });
    }

    chooseAudit(chooseAuditForm: HTMLFormElement) {

    }
}

@Component({
    selector: 'jhi-ftp-shelf-audit-popup',
    template: ''
})
export class FtpShelfAuditPopupComponent implements OnInit, OnDestroy {
    private ngbModalRef: NgbModalRef;
    private auditTypes: IAuditType[];

    constructor(private activatedRoute: ActivatedRoute,
                private router: Router,
                private jhiAlertService: JhiAlertService,
                private auditTypeService: AuditTypeService,
                private modalService: NgbModal) {
    }

    private onError(errorMessage: string) {
        this.jhiAlertService.error(errorMessage, null, null);
    }

    ngOnInit() {
        this.getAuditTypes();
        this.activatedRoute.data.subscribe(({ftpShelf}) => {
            setTimeout(() => {
                this.ngbModalRef = this.modalService.open(FtpShelfAuditDialogComponent as Component, {
                    size: 'lg',
                    backdrop: 'static'
                });
                this.ngbModalRef.componentInstance.ftpShelf = ftpShelf;
                this.ngbModalRef.componentInstance.auditTypes = this.auditTypes;
                this.ngbModalRef.result.then(
                    result => {
                        this.router.navigate([{outlets: {popup: null}}], {
                            replaceUrl: true,
                            queryParamsHandling: 'merge'

                        });
                        this.ngbModalRef = null;
                    },
                    reason => {
                        this.router.navigate([{outlets: {popup: null}}], {
                            replaceUrl: true,
                            queryParamsHandling: 'merge'
                        });
                        this.ngbModalRef = null;
                    }
                );
            }, 0);

        });
    }

    getAuditTypes() {
        this.auditTypeService.query().subscribe(
            (res: HttpResponse<IAuditType[]>) => {
                this.auditTypes = res.body;
            },
            (res: HttpErrorResponse) => this.onError(res.message)
        );
    }

    ngOnDestroy() {
        this.ngbModalRef = null;
    }

}

我做错了什么？我知道我应该以其他方式填充变量 auditTypes 但没有想到。感谢您提前回答。

标签： angularurl-routingjhipster

angular - 将数据传递给 Angular ngbModalRef

问题描述

解决方案

推荐阅读