diff --git a/frontend/src/app/shared/components/fields/display/field-types/hierarchy-item-display-field.module.ts b/frontend/src/app/shared/components/fields/display/field-types/hierarchy-item-display-field.module.ts index 2097ed397d06..4530c387d440 100644 --- a/frontend/src/app/shared/components/fields/display/field-types/hierarchy-item-display-field.module.ts +++ b/frontend/src/app/shared/components/fields/display/field-types/hierarchy-item-display-field.module.ts @@ -38,17 +38,22 @@ import { renderHierarchyItem } from 'core-app/shared/components/fields/display/f export class HierarchyItemDisplayField extends ResourceDisplayField { public render(element:HTMLElement, _displayText:string) { + const item = this.attribute as HalResource; + if (item === null || item.name === this.texts.placeholder) { + this.renderEmpty(element); + return; + } + element.innerHTML = ''; element.classList.add('hierarchy-items'); - this.branch().subscribe((path) => { + this.branch(item).subscribe((path) => { element.appendChild(path); }); } - private branch():Observable { - const attribute = this.attribute as HalResource; - const itemLink = attribute.$link as HalLink; + private branch(item:HalResource):Observable { + const itemLink = item.$link as HalLink; return from(itemLink.$fetch()) .pipe( diff --git a/frontend/src/app/shared/components/fields/display/field-types/multiple-lines-hierarchy-item-display-field.module.ts b/frontend/src/app/shared/components/fields/display/field-types/multiple-lines-hierarchy-item-display-field.module.ts index 038cd9be9059..4e60d43c9c19 100644 --- a/frontend/src/app/shared/components/fields/display/field-types/multiple-lines-hierarchy-item-display-field.module.ts +++ b/frontend/src/app/shared/components/fields/display/field-types/multiple-lines-hierarchy-item-display-field.module.ts @@ -38,10 +38,15 @@ import { renderHierarchyItem } from 'core-app/shared/components/fields/display/f export class MultipleLinesHierarchyItemDisplayField extends ResourcesDisplayField { public render(element:HTMLElement, _displayText:string) { + const items = this.attribute as HalResource[]; + if (items.length === 0) { + this.renderEmpty(element); + return; + } + element.innerHTML = ''; element.classList.add('hierarchy-items'); - - this.branches().subscribe((elements) => { + this.branches(items).subscribe((elements) => { elements.forEach((el) => { element.appendChild(el); }); @@ -52,10 +57,8 @@ export class MultipleLinesHierarchyItemDisplayField extends ResourcesDisplayFiel return this.stringValue.join(', '); } - private branches():Observable { - const attribute = this.attribute as HalResource[]; - - return combineLatest(attribute.map((value:HalResource) => { + private branches(items:HalResource[]):Observable { + return combineLatest(items.map((value:HalResource) => { const itemLink = value.$link as HalLink; return from(itemLink.$fetch())