如何删除包含小节的节

编程问答 2022-06-07

问题描述

在我的帮助对话框中，用户可以创建节和小节。我正在尝试实现一种功能，即使该节包含一个或多个子节，用户也可以删除该节。

如果该节没有任何subSection，我可以删除该节，也可以删除任何子节。

问题是，如果该节有一个子节，则我无法删除该节。

这是我的数据库的外观。 （一对多关系）

Id |姓名| ParentId（对ID的引用）|文字

  1. 宝马（部分）| NULL | NULL
  2. 如何修复宝马？ 1 |这是修复宝马
    3. 的方法
  3. 修复宝马第2部分| 1 |这是修复宝马第2部分的方法

TS 

mappedSections = [];


  openConfirmDialog(section,isSection: boolean) {
    let dialogRef = this.dialog.open(ConfirmDialogComponent,{
      data: {
        isSection
      },}
    );
    dialogRef.afterClosed().subscribe((value) => {
      if (!!value) {
        this.delete(section,isSection)
        this.fetchData();
      }
    })
  }


  delete(sec,isSection) {
    if (isSection) {
      this.HelpService.deleteHelp(sec.id).subscribe(() => {
        const index = this.mappedSections.findindex((value) => value.id == sec.id);
        this.mappedSections = this.mappedSections.filter(section => section.id != sec.id)
        if (~index) {
          this.HelpService.deleteHelp(sec.id).subscribe(() => {
            this.mappedSections = this.mappedSections.filter(subsection => subsection.id != sec.id);
            this.cdRefs.detectChanges()
          })
        }
      })
    } else {
      this.HelpService.deleteHelp(sec.id).subscribe(() => {
        const index = this.mappedSections.findindex((value) => value.id == sec.parentId);
        if (~index) {
          this.mappedSections[index].subSections = this.mappedSections[index].subSections.filter((subsection) => subsection.id != sec.id)
        }
      })
    }
  }

HTML 


                    <div *ngFor="let section of mappedSections">
                        <div style="margin-top: 20px;" *ngIf="section.parentId == null">
                            <p>Section</p>
                            <div>
                                <mat-form-field appearance="fill">
                                    <input matInput type="text" style="width: 200px; height: 15px;"
                                        (ngModelChange)="nameChanged({newValue: $event,isSection: true,id: section.id})"
                                        [(ngModel)]="section.name">
                                </mat-form-field>
                                <button mat-icon-button color="warn" matTooltip="Delete this Section"
                                    style="bottom: 10px;" (click)="openConfirmDialog(section,true)">
                                    <img class="button-icons" src="/assets/images/icons/delete-icon-warn.svg">
                                </button>
                            </div>
                        </div>
                        <div>
                            <div class="substyle" *ngFor="let subSection of mappedSections">
                                <div *ngIf="subSection.parentId == section.id">
                                    <mat-form-field appearance="fill">
                                        <input [disabled] = "subSection.id !== selectedId" matInput style="width: 200px; height: 15px;" type="text"
                                            (ngModelChange)="nameChanged({newValue: $event,id: subSection.id})"
                                            [(ngModel)]="subSection.name">
                                    </mat-form-field>
     
    
                                    <button mat-icon-button color="warn" matTooltip="Delete this Subsection"
                                        style="bottom: 10px;" *ngIf="isSubsection"
                                        (click)="openConfirmDialog(subSection,false)">
                                        <img class="button-icons" src="/assets/images/icons/delete-icon-warn.svg">
                                    </button>
                                </div>
                            </div>

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangular-materialhtmlhttp-deletetypescripttypescript