如何使用布尔值简化Angular中条件显示的按钮代码

I'm currently using this code to handle the button logic in my modal footer:

<div class="modal-footer"> 
  <button class="btn btn-secondary" (click)="close()">Close</button> 
  <input *ngIf="!isEdit" type="button" class="btn btn-primary" (click)="addCustomer(myForm)" value='Add data'> 
  <input *ngIf="isEdit" type="button" class="btn btn-success" (click)="updateCustomer(myForm)" value='Update'> 
</div>

When the boolean isEdit is false, the "Add data" button shows up; when it's true, the "Update" button appears instead. I want to simplify this code and avoid using two separate <input> elements. Is there a feasible way to do this?

Absolutely! You can consolidate this into a single button element by dynamically binding the properties that change based on isEdit. Here are a few clean, maintainable approaches:

Approach 1: Inline Property Binding (Concise) #

Use Angular's property binding to adjust the button's text, CSS class, and click handler directly in the template:

<div class="modal-footer"> 
  <button class="btn btn-secondary" (click)="close()">Close</button> 
  <button 
    class="btn" 
    [class.btn-primary]="!isEdit" 
    [class.btn-success]="isEdit"
    (click)="isEdit ? updateCustomer(myForm) : addCustomer(myForm)"
    [value]="isEdit ? 'Update' : 'Add data'"
    type="button"
  ></button>
</div>

Note: I switched from <input type="button"> to <button> since it's more semantically correct for action buttons, but you can apply the exact same bindings to an <input> tag if you need to keep that element type.

Approach 2: Helper Methods (Cleaner Template) #

If inline ternary operators start to feel cluttered, extract the logic into component methods to keep your template readable:

In your component .ts file:

getActionButtonText(): string {
  return this.isEdit ? 'Update' : 'Add data';
}

getActionButtonClass(): string {
  return this.isEdit ? 'btn btn-success' : 'btn btn-primary';
}

handleAction(myForm: any): void {
  this.isEdit ? this.updateCustomer(myForm) : this.addCustomer(myForm);
}

Then in your template:

<div class="modal-footer"> 
  <button class="btn btn-secondary" (click)="close()">Close</button> 
  <button 
    class="{{ getActionButtonClass() }}"
    (click)="handleAction(myForm)"
    [value]="getActionButtonText()"
    type="button"
  ></button>
</div>

This moves logic into the component where it's easier to test and extend later.

Approach 3: ngClass for Scalable Styling #

If you anticipate adding more states down the line, ngClass makes class binding more flexible and readable:

<div class="modal-footer"> 
  <button class="btn btn-secondary" (click)="close()">Close</button> 
  <button 
    class="btn"
    [ngClass]="{
      'btn-primary': !isEdit,
      'btn-success': isEdit
    }"
    (click)="isEdit ? updateCustomer(myForm) : addCustomer(myForm)"
    [value]="isEdit ? 'Update' : 'Add data'"
    type="button"
  ></button>
</div>

All these approaches eliminate duplicate elements and make your code more concise. Pick the one that best fits your project's style and future maintainability needs!

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