Как предотвратить перестановку дочерних элементов при удалении одного дочернего элемента в angular ⇐ CSS

[Anonymous]

У меня есть родительский компонент angular, который отображает дочерние компоненты с помощью директивы ngFor. Каждый дочерний элемент действует как отдельное окно внутри родителя, и их положение можно изменить с помощью CdkDrag. И я также создал небольшую кнопку «X» в правом верхнем углу, чтобы закрыть дочерний компонент. И когда я нажимаю кнопку «x», чтобы закрыть один дочерний элемент с низким индексом (например, 1 или 2 в примере stackbliz ниже), остальные дочерние элементы автоматически перестраиваются. Есть ли способ предотвратить такие перестановки и оставить все как есть при закрытии любого дочернего окна?

дочерний компонент

@Input('target') target: string = ''; @Input('index') index: string = ''; @Output() onClose: EventEmitter = новый EventEmitter(); closeModal() { const я: число = +this.index; this.onClose.emit(i); } дочерний шаблон

{{цель}} X дочерний CSS

.example-box { ширина: 100 пикселей; высота: 100 пикселей; граница: сплошная 1 пиксель #ccc; цвет: rgba(0, 0, 0, 0,87); дисплей: гибкий; оправдание-содержание: центр; положение: относительное; изменить размер: оба; } .CloseButton { позиция: абсолютная; верх: 10 пикселей; справа: 10 пикселей; } родительский компонент

имена: string[] = ['1', '2', '3']; modalClosed (идентификатор: любой) { this.names.splice(id, 1); console.log(id); } родительский шаблон

родительский CSS

.ParentMain { дисплей: гибкий; } Полный пример стека

Пример кода Stackbliz