如何在 Angular 中启用点击项目

Question

我的对话框容器中有一个小节列表。我正在尝试在对话框打开时禁用所有这些功能，并且仅在单击该小节的铅笔图标时才启用选定的小节。

例如....

当用户点击小节 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)
        }
      })

Answer 1

你可以试试这样的

在 input 中将 [disabled] 属性绑定到 boolean，如下所示：

<p class="substyle">Subsections</p>
<div class="substyle" *ngFor="let subsection of section.subSections">
  <mat-form-field appearance="fill">
       <input [disabled] = "subsection.id !== selectedId" matInput style="width: 200px; height: 15px;" type="text"
       (ngModelChange)="nameChanged({newValue: $event, isSection: false, id: subsection.id})"
       [(ngModel)]="subsection.sectionName">
   </mat-form-field>

<button mat-icon-button color="primary" matTooltip="Edit documents for this Subsection"
   style="bottom: 10px;" (click)="editDoc(subsection)"> <mat-icon>edit</mat-icon>
</button>

<button mat-icon-button color="primary" matTooltip="Delete this 
    Subsection" (click)="openConfirmDialog(subsection, false)" 
    style="bottom: 10px;" *ngIf="isSubsection"><mat-icon>delete</mat-icon>
</button>

然后在您的 editDoc 函数中，执行以下操作：

  editDoc(value) {
    // make sure you make selectedId a property before doing this
    this.selectedId = value.id  // set the selectedId property to the selected value id
    this.subsectionToEdit = value;
    this.refreshEditor = false;
  }

所以会发生的是，每当设置 selectedId 时，它会将所有不属于所选子部分的输入设置为自动禁用。

如何在 Angular 中启用点击项目

How to enable Item on click in Angular

html

typescript

angular-material

angular

disable