html - 如何在 BS Modal DOM 加载之前访问 html 中的数据？

问题描述

我有一个超链接，单击此单击打开 Modal。它工作正常。我正在使用 PrimeNG组织结构图，并使用[value]="data1". 我想在此模式呈现给最终用户时预选一个节点。所以我用[(selection)]="data1[0].children[0]". 但它给出了以下错误，但是当我data1在控制台和调试器模式下检查它的显示数据时。有没有办法data1在模态加载之前设置。或任何其他解决方法？

无法读取未定义的属性子项

所以我认为它在 DOM 加载时没有获取数据。但同样出于同样的原因[value]="data1"也不应该工作。

第一页 html

<div class="row clearfix" [@routerTransition]>
    <div class="ui-grid-row"><a href="javascript:showcategorychart.show(record.id)">{{record.categoryName}}</a></div>
    <show-category-chart-modal #showcategorychart [categoryId]="categoryId"></show-category-chart-modal>
</div>

第一页打字稿

@ViewChild('showcategorychart') showcategorychart: CategoryChartData;

showCategoryChart(row): void {
    this.categoryId = row.id;
    this.showcategorychart.show();
};

模态 HTML

<div bsModal #showcategorychart="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="showcategorychart" aria-hidden="true" [config]="{backdrop: 'dynamic'}">
    <div class="modal-dialog modal-lg">
        <div #modalContent class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" (click)="close()">&times;</button>
                <h4 class="modal-title">Category Hierarchy</h4>
            </div>
            <div class="modal-body">
                <div class="content-section implementation">
                    <p-organizationChart [value]="data1" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="onNodeSelect($event)"
                                         styleClass="company">
                        <ng-template let-node pTemplate="person">
                            <div class="node-header ui-corner-top">{{node.label}}</div>
                            <div class="node-content">
                                <img src="{{node.data.avatar}}" width="32">
                                <div>{{node.data.name}}</div>
                            </div>
                        </ng-template>
                        <ng-template let-node pTemplate="department">
                            {{node.label}}
                        </ng-template>
                    </p-organizationChart>
                </div>
            </div>
        </div>
    </div>
</div>

模态打字稿

@Component({
    selector: 'show-category-chart-modal',
    templateUrl: './categorydetails.html',
})
//@Directive({ selector: '[formGroupName]', providers: [formGroupNameProvider] })
export class CategoryChartData extends AppComponentBase implements OnInit {
    data1: TreeNode[] = [];
    selectedNode: TreeNode;
    formGroup: any;
    @Input() parent;
    @ViewChild('showcategorychart') modal: ModalDirective;
    @ViewChild('modalContent') modalContent: ElementRef;
    @Input() categoryId: number;
    @Input() category: CategoryDto;
    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
    active: boolean = false;
    public categoryTemplate: TemplatesTypes[];
    public CategoryList: CategoryDto[] = [];
    form: FormGroup;
    name: string;

    constructor(
        injector: Injector,
        private route: ActivatedRoute,
        private router: Router,
        private _categoryservice: CategoryServiceProxy,
        private _tokenService: TokenService,
        private fb: FormBuilder,
        private cd: ChangeDetectorRef
    ) {
        super(injector);
    }

    ngOnInit(): void {
    }

    onSelectCategoryTemplate(templatesTypesId) {
        var count = 0;
        for (var i = 0; i < this.categoryTemplate.length; i++) {
            if (this.categoryTemplate[i].id == templatesTypesId) {
            }
        }
        this.CategoryList = [];
        for (var j = 0; j < count; j++) {
            this.CategoryList.push(this.category);
        }
    }

    show(categoryid?: number): void {
        this.data1 = [];
        this.categoryId = categoryid;
        this.loadAll();
        this.modal.show();
    }

    close(): void {
        this.active = false;
        this.modal.hide();
    }

    loadAll() {
        this._categoryservice.getCategoryChartDataByCategoryID(this.categoryId).subscribe(
            (res) => {
                this.categoriestoTreeNodes(res);
                this.selectedNode = this.data1[0].children[0];
                console.log(this.selectedNode);
            }
        );
    }

    private categoriestoTreeNodes(categories: CategoryChartDto) {
        this.data1.push(this.categoriestoTreeNode(categories));
    }

    private categoriestoTreeNode(cont: CategoryChartDto): TreeNode {
        return {
            label: cont.label,
            type: cont.type,
            styleClass: cont.styleClass,
            expanded: cont.expanded,
            data: cont.data,
            children: cont.children,
            selectable: cont.selectable,
            parent: cont.selectedCategory
        };
    }
}

标签： htmlangulartypescriptbootstrap-modalprimeng

html - 如何在 BS Modal DOM 加载之前访问 html 中的数据？

问题描述

解决方案

推荐阅读