单击结果按钮时如何对两个数字求和并显示结果

时间:2019-05-02 14:48:25

标签: javascript html css angular7

我制作了角度为7的计算器应用程序,我想计算加,减,乘,除方法。我具有在输入中显示数字按钮的功能,但是当我求和或进行任何计算方法时,需要通过单击结果按钮在输入中显示结果。

buttons.component.ts

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

    @Component({
      selector: 'app-buttons',
      templateUrl: './buttons.component.html',
      styleUrls: ['./buttons.component.css']
    })
    export class ButtonsComponent {
     @Input() value :string;
      result:string=''; 

    setValue(value: string) {
     this.value = value;
    }

    addition(){
      this.result= this.value + this.value;
    }

     buttons.component.html

    <div class="calculator"> 
    <div><span> </span></div>
    <div>
      <label>
        <input [(ngModel]="value" placeholder="0"/>
      </label>
    </div>
      <div  class="calculator-buttons" ></div>
      <div>
      <button type="button" class="btn btn-calc clear" (click)="clear()"> AC </button>
      <button type="button" class="btn btn-calc" (click)="delete()" > < </button>
      <button type="button" class="btn btn-calc operator" (click)="div()"> / </button>
    </div>

    <div>
      <button type="button" class="btn btn-calc" (click)="setValue()" value="7" >7</button>
      <button type="button" class="btn btn-calc"  (click)="setValue()" value="8">8</button>
      <button type="button" class="btn btn-calc" (click)="setValue()" value="9">{{ 9}}</button>
      <button type="button" class="btn btn-calc operator" (click)="multiply()">*</button>
    </div>

    <div>
      <button type="button" class="btn btn-calc" (click)="setValue()" value="4">4</button>
      <button type="button" class="btn btn-calc" (click)="setValue()" value="5">5</button>
      <button type="button" class="btn btn-calc" (click)="setValue()" value="6">6</button>
      <button type="button"class="btn btn-calc operator" (click)="sub()">-</button>
    </div>

    <div>
      <button type="button" class="btn btn-calc" (click)="setValue()" value="1">1</button>
      <button type="button" class="btn btn-calc" (click)="setValue()" value="2">2</button>
      <button type="button" class="btn btn-calc" (click)="setValue()" value="3">3</button>
      <button type="button" class="btn btn-calc operator" (click)="addition()">+</button>
    </div>

    <div>
      <button type="button" class="btn btn-calc zero" (click)="setValue()" value="0">0</button>
      <button type="button" class="btn btn-calc"(click)="dot()">.</button>
      <button type="button" class="btn btn-calc operator"(click)="result($event)">=</button>

    </div>

    </div>

0 个答案:

没有答案