如何在 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 時，它都會將所有不屬於所選子部分的輸入設置為自動禁用。