如何在Angular中启用点击项目

编程问答 2022-06-12

问题描述

我的对话框容器中有一个小节列表。我正在尝试在打开对话框时将其全部禁用，而在单击该子区域的铅笔图标时仅启用所选子区域。

例如。...

当用户单击第1小节的铅笔图标

时

第1小节已启用

第2小节已禁用

第3小节已禁用。 ....

第2小节和第3小节的过程相同。任何建议或帮助都将不胜感激。

<p class="substyle">Subsections</p>
<div class="substyle" *ngFor="let subsection of section.subSections">
  <mat-form-field appearance="fill">
       <input matInput(ngModelChange)="nameChanged({newValue: $event,isSection: false,id: subsection.id} 
        [(ngModel)]="subsection.sectionName">
   </mat-form-field>

<button mat-icon-button color="primary" 
    (click)="editDoc(subsection)"> <mat-icon>edit</mat-icon>
</button>

<button mat-icon-button (click)="openConfirmDialog(subsection,false)" 
    *ngIf="isSubsection"><mat-icon>delete</mat-icon>
</button>

TS 

// THis is called when pencil icon is click
  editDoc(value) {
    this.subsectionToEdit = value;
    this.refreshEditor = false;
  }

// Delete Subsections
      this.HelpService.deleteHelpSubsection(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)
        }
      })

enter image description here

解决方法

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

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

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

angularangular-materialdisablehtmltypescripttypescript