Как сохранить количество нажатий / отключенных / включенных кнопок в базе данных, используя машинопись / в угловых? - PullRequest
Новая
       7

Как сохранить количество нажатий / отключенных / включенных кнопок в базе данных, используя машинопись / в угловых?

0 голосов
/ 29 июня 2018

Это мой 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>

1 Ответ

0 голосов
/ 29 июня 2018

Вот ваше решение

код 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>
...