Как удалить динамический c компонент при удалении в angular?

Question

Я пытаюсь создать панель расширения матов и динамически создать внутри нее список матов. Код приведен ниже:

<mat-expansion-panel *ngFor="let bAttr of bAttrList" (opened)="openPanel(bAttr)">
            <mat-expansion-panel-header>
              <mat-panel-title>
                {{bAttr}}
              </mat-panel-title>
              <mat-panel-description>
                {{bAttr}}
              </mat-panel-description>
            </mat-expansion-panel-header>


            <mat-list *ngFor="let baValue of baValueList">
              <app-ba-update [baValue]="baValue" [bAttr]="bAttr" [lob]="lobSelected"></app-ba-update>

            </mat-list>

          </mat-expansion-panel>

Здесь вы видите, я пытаюсь вызвать другой дочерний компонент для каждого элемента bAttr. Внутри дочернего элемента у нас есть возможность редактировать и удалять baValue. После удаления мне нужно удалить элемент из списка / refre sh содержимое списка матов, открываемых в данный момент на панели расширения матов. Когда я раскрываю панель расширения, вызывается метод openPanel (), и он устанавливает значение baValueList. Как сообщить родительскому элементу, какой именно дочерний элемент мне нужно удалить, или указать родительскому элементу переопределить sh baValueList?

ПРИМЕЧАНИЕ. Существует несколько списков bAttr и, соответствующих им, несколько baValueList.

Answer 1

Вы можете обновить переменную при открытии и закрытии панели, и на основании этого вам нужно добавить условие в селектор следующим образом:

<mat-accordion> <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> <mat-expansion-panel-header> <mat-panel-title> Self aware panel </mat-panel-title> <mat-panel-description> Currently I am {{panelOpenState ? 'open' : 'closed'}} </mat-panel-description> </mat-expansion-panel-header> <papp-ba-update *ngIf="panelOpenState">I'm visible because I am open</app-ba-update> </mat-expansion-panel> </mat-accordion>

Answer 2

Вам необходимо уничтожить компонент и загрузить его снова. вам нужно иметь флаг, чтобы открыть и закрыть расширение и поместить директиву *ngIf в селектор.