Question

这是我的html。每次单击（禁用）1个新按钮时，我都想在打字稿中存储诸如count ++之类的内容。

此外，每次单击（禁用）1个按钮时，我都希望将其存储在数据库中。

 <ion-grid >
    <ion-row class="row">
    <ion-col class="col" style="margin:2px; text-align: center;">
     <button name="button1" [disabled]="disabled1" (click)="disabled1=true" ion-button style= "background-color: #bd838e; border-radius: 50%; width:50%; "></button>
    </ion-col>

    <ion-col class="col" style="margin:2px; text-align: center;">
     <button name="button2" [disabled]="disabled2" (click)="disabled2=true" ion-button style= "background-color: #bd838e; border-radius: 50%; width:50%;  "></button>
    </ion-col> 

    <ion-col class="col" style="margin:2px; text-align: center;">
     <button name="button3" [disabled]="disabled3" (click)="disabled3=true" ion-button style= "background-color: #bd838e; border-radius: 50%; width:50%; "></button>
    </ion-col>

    <ion-col class="col" style="margin:2px; text-align: center;">
      <button name="button4" [disabled]="disabled4" (click)="disabled4=true" ion-button style= "background-color: #bd838e; border-radius: 50%; width:50%; "></button>
    </ion-col>

     <ion-col class="col" style="margin:2px; text-align: center;">
      <button name="button5" [disabled]="disabled5" (click)="disabled5=true" ion-button style= "background-color: #bd838e; border-radius: 50%; width:50%;">20%</button>
     </ion-col>

  </ion-row>
  </ion-grid>

Answer 1

Here is your solution

ts代码：

import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  clickCount: number = 0;
  disableOrenable: boolean = false;
  disablecount: number = 0;
  enableCount: number = 0;

  /**
   * method is used to calculate no of click count 
   */
  calculateClick() {
    this.disableOrenable = !this.disableOrenable;
    if (this.disableOrenable) {
      /**
       * You can call api here to update counts.
       */
      this.disablecount = this.disablecount + 1;
    } else {
      this.enableCount = this.enableCount + 1;
    }
    this.clickCount = this.clickCount + 1;
  }
}

HTML：

<button (click)="calculateClick()">click me</button>
<p> dynamically update you database Click count = {{clickCount}}</p>

<button [disabled]="disableOrenable">Disable/Enable Count</button>
<p> dynamically update you database disable count = {{disablecount}}</p>

<p> dynamically update you database enable count = {{enableCount}}</p>

如何使用打字稿/角度存储数据库中的点击/禁用/启用按钮的数量？

1 个答案: