Angular 4：ERROR CONTEXT <failed to =“”convert =“”exception =“”to =“”string =“”>

Question

我正在尝试在Angular 4中将基本转换器的代码从十进制编写为二进制，八进制和六进制。但我得到的是“超出最大调用堆栈”＃。

以下是带有错误的当前代码。

HTML

<form class="container" [formGroup]="form">
<input type="text" (ngModelChange)="decimalChanged(oldValue , newValue = $event)" name="decimal" placeholder="decimal" formControlName="decimal"/>
<br/><br/>
<input type="text" (ngModelChange)="binaryChanged(oldValue , newValue = $event)" name="binary" placeholder="binary" formControlName="binary"/>
<br/><br/>
<input type="text"  (ngModelChange)="octalChanged(oldValue , newValue = $event)" name="octal" placeholder="octal" formControlName="octal"/>
<br/><br/>
<input type="text" (ngModelChange)="hexaChanged(oldValue , newValue = $event)" name="hexa" placeholder="hexa" formControlName="hexa"/>
<br/><br/>
</form>

TS

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  form;
  ngOnInit(){
      this.form= new FormGroup ({
          decimal : new FormControl(""),
          binary : new FormControl(""),
          octal  : new FormControl(""),
          hexa  : new FormControl(""),
      })
  }

  decimalChanged = function(oldValue, newValue){
    if(newValue != ""){
             this.form.patchValue({binary:parseInt(newValue,10).toString(2)});
             this.form.patchValue({octal:parseInt(newValue,10).toString(8)});
             this.form.patchValue({hexa:parseInt(newValue,10).toString(16)});
             }else{
            this.form.patchValue({binary:""});
             this.form.patchValue({octal:""});
             this.form.patchValue({hexa:""});
             }
  }

  b=0;
  o=0;
  h=0;

  binaryChanged = function(oldValue, newValue){
   this.b=this.b+1;
   if(this.b==1){
     if(newValue != ""){
           this.form.patchValue({decimal:parseInt(newValue,2).toString(10)});
      }else{
           this.form.patchValue({decimal:""});
      }
   }
    this.b=0;
  }

 octalChanged = function(oldValue, newValue){
   this.o=this.o+1;
      if(this.o==1){
        if(newValue != ""){
           this.form.patchValue({decimal:parseInt(newValue,8).toString(10)});
        }else{
           this.form.patchValue({decimal:""});
       }
      }
      this.o=0;
  }

 hexaChanged = function(oldValue, newValue){
   this.h=this.h+1;
      if(this.h==1){
      if(newValue != ""){
           this.form.patchValue({decimal:parseInt(newValue,16).toString(10)});
      }else{
           this.form.patchValue({decimal:""});
        }
      }
      this.h=0;
  }


}

我在屏幕截图中提供了以下错误。

Answer 1

尝试使用以下代码，希望它能够正常工作

 import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormControl } from '@angular/forms';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'app';
      form;
      ngOnInit() {
        this.form = new FormGroup({
          decimal: new FormControl(""),
          binary: new FormControl(""),
          octale: new FormControl(""),
          hexa: new FormControl("")
        });
      };

      decimalChanged = function(oldValue, newValue){
        if(newValue != ""){
          this.form.patchValue({binary: parseInt(newValue, 10).toString(2)});
          this.form.patchValue({octale: parseInt(newValue, 10).toString(8)});
          this.form.patchValue({hexa: parseInt(newValue, 10).toString(15)});
        }else{
          this.form.patchValue({binary: ""});
          this.form.patchValue({octale: ""});
          this.form.patchValue({hexa: ""});
        }
      } 

     b = 0;
     o = 0;
     h = 0;

     binaryChanged = function(oldValue, newValue){
      this.b=this.b+1;
      if(this.b==1){
        if(newValue != ""){
              this.form.patchValue({decimal:parseInt(newValue,2).toString(10)});
         }else{
              this.form.patchValue({decimal:""});
         }
         this.b=0;
      }
     }

    octalChanged = function(oldValue, newValue){
      this.o=this.o+1;
         if(this.o==1){
           if(newValue != ""){
              this.form.patchValue({decimal:parseInt(newValue,8).toString(10)});
           }else{
              this.form.patchValue({decimal:""});
          }
          this.o=0;
         }
     }

    hexaChanged = function(oldValue, newValue){
      this.h=this.h+1;
         if(this.h==1){
         if(newValue != ""){
              this.form.patchValue({decimal:parseInt(newValue,16).toString(10)});
         }else{
              this.form.patchValue({decimal:""});
           }
           this.h=0;
         }
     }
    }