У меня есть гиперссылка, я открываю модал по щелчку этого клика.Работает нормально.Я использую PrimeNG организационную диаграмму и назначаю значение этой организационной диаграмме с помощью [value]="data1".Я хочу предварительно выбрать узел, когда этот модальный рендеринг для конечного пользователя.Поэтому я использую [(selection)]="data1[0].children[0]".Но это выдает ошибку ниже, но когда я проверяю data1 в консоли и в режиме отладчика, это показывает данные.Есть ли способ установить data1 до модальных нагрузок.Или любой другой обходной путь?
не может прочитать дочерние свойства свойства undefined
Так что я думаю, что он не получает данные во время загрузки 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()">×</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
};
}
}