Angular：使用单个变量实现多个按钮的独立启用/禁用控制

Got it! If you want to use one single variable to control each button's enabled/disabled state independently (instead of all buttons sharing the same state), you'll need to switch your btnState from a single boolean value to an object or array. This way, you keep everything under one variable but can target each button individually.

Step 1: Update the Component Class #

First, define btnState as an object (matching your button values) or an array (using button indices) in your component TypeScript:

Option 1: Object (best for unique string values like val1, val2)

// Inside your component class
btnState: { [key: string]: boolean } = {
  val1: false, // false = enabled, true = disabled
  val2: false,
  val3: false,
  val4: false
};

// Optional: Method to toggle all buttons at once
toggleAllButtons(state: boolean): void {
  Object.keys(this.btnState).forEach(key => {
    this.btnState[key] = state;
  });
}

// Example: Update a specific button's state when clicked
onButtonClick(val: string): void {
  // Toggle the clicked button's state (or set it to whatever you need)
  this.btnState[val] = !this.btnState[val];
  // Add your original business logic here
}

Option 2: Array (great for using button indices)

// Inside your component class
btnState: boolean[] = [false, false, false, false]; // Index 0 = button 1, etc.

// Optional: Toggle all buttons
toggleAllButtons(state: boolean): void {
  this.btnState.fill(state);
}

// Example: Handle button clicks
onButtonClick(val: string, index: number): void {
  this.btnState[index] = !this.btnState[index];
  // Your business logic...
}

Step 2: Update the Template #

Modify your button bindings to reference the specific property in the object/array:

For the Object Approach

<button class="button" [disabled]="btnState['val1']" (click)="onButtonClick('val1')">Button 1</button>
<button class="button" [disabled]="btnState['val2']" (click)="onButtonClick('val2')">Button 2</button>
<button class="button" [disabled]="btnState['val3']" (click)="onButtonClick('val3')">Button 3</button>
<button class="button" [disabled]="btnState['val4']" (click)="onButtonClick('val4')">Button 4</button>

<!-- Optional: Add buttons to toggle all at once -->
<button (click)="toggleAllButtons(true)">Disable All Buttons</button>
<button (click)="toggleAllButtons(false)">Enable All Buttons</button>

For the Array Approach

<button class="button" [disabled]="btnState[0]" (click)="onButtonClick('val1', 0)">Button 1</button>
<button class="button" [disabled]="btnState[1]" (click)="onButtonClick('val2', 1)">Button 2</button>
<button class="button" [disabled]="btnState[2]" (click)="onButtonClick('val3', 2)">Button 3</button>
<button class="button" [disabled]="btnState[3]" (click)="onButtonClick('val4', 3)">Button 4</button>

<!-- Optional: Toggle all buttons -->
<button (click)="toggleAllButtons(true)">Disable All</button>
<button (click)="toggleAllButtons(false)">Enable All</button>

Why This Works #

Your original code used a single boolean btnState, which meant all buttons shared the exact same state. By using an object or array, you’re still using one variable (btnState), but each button binds to a unique property inside that variable. This lets you control each button individually while keeping your state organized.

内容的提问来源于stack exchange，提问作者Ravikumar Govindaraj