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

Question

我有一个超链接，我在点击此点击时打开 Modal。它工作正常。我正在使用 PrimeNG organization chart 并使用 [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
        };
    }
}

Answer 1

后端解决方案

我已经解决了后端应用程序的问题，方法是将特定节点的后端TreeNodeobject 的styleClass 属性设置为node-selected。

前端解决方案

我已经通过初始化@Antikhippe 提供的this.data1 = [{children:[]}] 来尝试解决方案。感谢您的回答。它也可以正常工作。

因此，如果您想解决此问题，您现在有两个选择。您可以从后端或前端执行此操作。

Answer 2

防止

无法读取未定义的子属性

当尝试访问data1[0].children[0] 时，只需使用类似的空数据初始化data1：

this.data1 = [{children:[]}]

现在，data1[0] 等于 {children:[]} 并且不再是未定义了。