Error in displaying calculated value in table

[vithika]

Hello everyone,

I Have just created a form which accepts all the values from the user,like this:-

Now I want these values to be displayed in table:-

Now the values are displayed well,but I want to show the calculation too.,My balance is empty field here,but I wish that the balance should come out to be deposit-withdrawl(in the above example -450)

my html code:-

<form [formGroup]="journal" (ngSubmit)="journaldata()"> 

 <ion-card>  
  <ion-card-header>    
  JOURNAL    </ion-card-header>    

<ion-card-content>       <ion-item>      
  <ion-label>Date<span>&nbsp;<sup>*</sup></span>
</ion-label>  
      <ion-input type="text" formControlName="date">
</ion-input>    
  </ion-item>        
 <ion-item>        <ion-label>Details<span>&nbsp;<sup>*</sup></span></ion-label>    
    <ion-input type="text" formControlName="details">
</ion-input> 
     </ion-item>  
    <ion-item>    
    <ion-label>Withdrawl<span>&nbsp;<sup>
*</sup></span></ion-label>        
<ion-input type="text" formControlName="withdrawl"></ion-input>      </ion-item>       <ion-item>   
     <ion-label>Deposit<span>&nbsp;<sup>
*</sup></span></ion-label>     
   <ion-input type="text" formControlName="deposit"></ion-input>      </ion-item>      <ion-item>   
     <ion-label>ACCOUNT NAME</ion-label>   
 <ion-select formControlName="accountname" multiple="false" >      <ion-option  *ngFor='let journal of accountsList' [value]="journal">{{journal }}</ion-option>    </ion-select>  
    </ion-item>
      <!-- <ion-item>    
    <ion-label> Account Name<span>&nbsp;<sup>*</sup></span></ion-label>    
    <ion-input type="text" formControlName="accountname">
</ion-input>      
</ion-item>-->
       <ion-item>   
     <ion-label>Bank Reconcilation<span>&nbsp;<sup>
*</sup></span></ion-label>        
<ion-input type="text" formControlName="bank"></ion-input>      </ion-item>
      <ion-item>
<ion-list>   
   <button ion-button (click)="journaldata()" >Create Journal</button>      </ion-list></ion-item>

My ts file-

import { Component } from '@angular/core';import 
{ IonicPage, NavController, NavParams } 
from 'ionic-angular';import {JournaladdProvider} from '../../providers/journaladd/journaladd';import{Validators,FormBuilder,FormGroup}from'@angular/forms';
import {AddaccountProvider} from '../../providers/addaccount/addaccount';/** * Generated class for the JournalPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */@IonicPage()@Component({  selector: 'page-journal',  templateUrl: 'journal.html',})export class JournalPage {journal:FormGroup;  
 accountsList : any = [];  
accountSelected: any;
    list: any = {};
  name:any=[]; 
 add:any={};  
 constructor(public navCtrl:NavController,public navParams:NavParams,   public store:AddaccountProvider,   public formBuilder: FormBuilder )
 {
     this.journal = this.formBuilder.group({  
    date: ['', Validators.required], 
     withdrawl: [''],deposit:[''],bank:[''],details:['',Validators.required],      accountname: ['', Validators.required], 
   });
     this.store.getAccountList().then(journal => {   
   this.accountsList = journal; 
   //  this.transfer.value.accountSelected = this.accountsList[0];
  });
  }


  ionViewDidLoad() 
{    console.log('ionViewDidLoad JournalPage'); 
 }
  ionViewWillEnter()
  { 
   this.store.getAccountList().then(transfer => {  
    this.accountsList = transfer;
      //this.transfer.value.accountSelected = this.accountsList[0]; 
 });
  }  journaldata()
  {

let balance  = this.journal.value.deposit - this.journal.value.withdraw;
let key = this.journal.value.accountname;  
  key = this._formatString(key);   
 let checkbook = []; 
  
     let datas = {date: new Date().toLocaleDateString(), num: 1, description: this.journal.value.details, r:
 'R', withdraw: this.journal.value.withdrawl,   
       deposit:  this.journal.value.deposit,balance:balance}; 
   checkbook.push(datas);  

  this.list = {      created: new Date().toString(), details:this.journal.value.details,withdrawl: this.journal.value.withdrawl, deposit: this.journal.value.deposit ,accountname:this.journal.value.accountname,bank:this.journal.value.bank,checkbook:checkbook  
  }; 
   this.store.set(key, JSON.stringify(this.list));
     alert('Journal Created');   /* this.list = 
{      created: new Date().toString(), details:this.journal.value.details,withdrawl: this.journal.value.withdrawl, deposit: this.journal.value.deposit ,accountname:this.journal.value.accountname,bank:this.journal.value.bank    };    this.store.set(JSON.stringify(this.list));   
     alert('Journal Created');*/
   // console.log(JSON.stringify(this.j));  
  //console.log("error");  
  // this.store.set(JSON.stringify(this.j));  }
  _formatString(name)
{    /* Remove whitespaces 
*/    while(name.indexOf(" ") != -1)
{      name = name.replace(" ","");  
  }   
 return name;
  }
}

Thanks in advance,I have tried to calculate the balance using,

let balance  = this.journal.value.deposit - this.journal.value.withdraw;

and passed in the array:-

let datas = {date: new Date().toLocaleDateString(), num: 1, description: this.journal.value.details, r: 'R', withdraw: this.journal.value.withdrawl,   
       deposit:  this.journal.value.deposit,balance:balance}; 
   checkbook.push(datas);

Please guide where I am wrong.

Thanks in advance

[rapropos]

@vithika

Please guide where I am wrong.

For one thing, I don’t see any reference to balance in the template. For another, I see lots of any, which makes me sad.

[vithika]

I don’t see any reference to balance in the template, what does that mean.please elaborate it a bit.I couldn’t get it.
How to do that…
Please provide me with example.

[vithika]

Balance is the calculated value from the value of withdrawal and deposit.
It’s not in this page.but will be displayed on the table.
It has been referenced there.

[rapropos]

@vithika

Balance is the calculated value […] It has been referenced there.

Then “there” is the template code we need to see. You are saying your problem is that you are having trouble displaying “balance”, yet show us no template that is attempting to display “balance”.

[vithika]

let balance  = this.entry.deposit - this.entry.withdraw;      
      console.log("Add "+this.register.checkbook[this.register.checkbook.length-1].balance+" & "+balance);     
       balance = parseInt(balance.toString()) + parseInt(this.register.checkbook[this.register.checkbook.length-1].balance);
            let entryData = { date: this.entry.date, num: this.entry.num, description: this.entry.description,  
  r: this.entry.r, withdraw: this.entry.withdraw,    
  deposit: this.entry.deposit, balance: balance  
          };
            // console.log(data);                    
    this.register.checkbook.push(entryData);
            console.log(JSON.stringify(this.register));             this.store.set(this.accountSelected, JSON.stringify(this.register));
            });

That’s the template where I am displaying the table with calculation done.
I am able to display the values but only balance is missing.

I am calculating the balance but the values is not displayed there.

[rapropos]

@vithika

That’s the template where I am displaying the table with calculation done.

Not as far as I can see, it isn’t. I see no template whatsoever there.

[vithika]

This is the html file:-

<div class="header">Checkbook Register</div>        <table>             <tr>                <td>Date</td>                <td>Num</td>                <td>Description</td>            
    <td>R</td>    
            <td>Withdrawal, Payment (-)</td>       
         <td>Deposit, Credit (+)</td>         
       <td>Balance</td> 
           </tr>          
  <tr *ngFor='let entry of register.checkbook'>            
    <td>{{ entry.date }} </td>           
     <td>{{ entry.num }} </td>    
            <td>{{ entry.description }} </td>          
      <td>{{ entry.r }} </td>          
      <td>{{ entry.withdraw }} </td>        
        <td>{{ entry.deposit }} </td>  
              <td>{{ entry.balance }} </td>     
       </tr>
        </table>    </div>

[rapropos]

This is getting somewhat frustrating. Can you please provide public access to a minimal complete repository that allows people to reproduce your issue?

[vithika]

Checkbook Register

Date	Num	Description	R	Withdrawal, Payment (-)	Deposit, Credit (+)	Balance
{{ entry.date }}	{{ entry.num }}	{{ entry.description }}	{{ entry.r }}	{{ entry.withdraw }}	{{ entry.deposit }}	{{ entry.balance }}

[vithika]

HOW can I do that
please provide public access to a minimal complete repository that allows people to reproduce your issue?

[vithika]

https://drive.google.com/open?id=0ByIYitJ-wEqbU0VJOEV0X1ViTFk

Link to the repository