Angular 4 forEach() on component.ts

Question

rowData: any = [{
  'title': 'Product' as string,
  'qty': null as number,
  'material_margin': null as number,
  'material_unit_rate': null as number,
  'labour_unit_rate': null as number
}];

rowData.forEach( item => {
  this.material_sub_total = this.material_sub_total + item.material_unit_rate*item.qty+(item.material_margin/100*item.material_unit_rate*item.qty);
});

I have defined an array with object in one of my component and I want to calc sub total But I get error saying duplicate identifier 'rowData'. If possible could anyone suggest me how to use foreach or even if it is possible? I am using angular 4 created with cli.

Full code of component goes here

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';
import { MdSnackBar } from '@angular/material';
import { SlimLoadingBarService } from 'ng2-slim-loading-bar';
import { LaravelService } from './../laravel.service';

@Component({
  selector: 'app-single-estimate-section',
  templateUrl: './single-estimate-section.component.html',
  styleUrls: ['./single-estimate-section.component.css']
})
export class SingleEstimateSectionComponent implements OnInit {

  section: any = [];
  estimate_id: number;
  section_id: number;
  laravelResponse: any;
  submitButton = false;
  buttonClicked: string;

  material_sub_total: number = 0;
  labour_sub_total: number = 0;

  rowData: Array<Object> = [{
    'title': 'Product' as string,
    'qty': null as number,
    'material_margin': null as number,
    'material_unit_rate': null as number,
    'labour_unit_rate': null as number
  }];


  rowData.forEach(item => {
    this.material_sub_total = this.material_sub_total + item.material_unit_rate * item.qty + (item.material_margin / 100 * item.material_unit_rate * item.qty);
  });


  public postForm = this.formBuilder.group({
    'title': '',
    'qty': '',
    'material_margin': '',
    'material_unit_rate': '',
    'labour_unit_rate': ''
  });

  onButtonClick(event: string) {
    this.buttonClicked = event;
  }

  onAddNewClick() {
    this.rowData.push({
      'title': '' as string,
      'qty': null as number,
      'material_margin': null as number,
      'material_unit_rate': null as number,
      'labour_unit_rate': null as number
    });
  }

  onRemoveRowClick(i: number) {
    this.rowData.splice(i, 1);
  }

  onSubmit(data) {
    let formData = this.postForm.value;
    this.laravel.post_request('/edit-estimate-section/' + this.estimate_id + '/' + this.section_id, formData).subscribe(
      (data) => {
        this.laravelResponse = data.json();

        if (this.laravelResponse.status == 1) {
          this.snackBar.open(this.laravelResponse.message, 'OK', { duration: 3000 });
          if (this.buttonClicked == 'update-continue') {
            this.router.navigateByUrl('/estimates/' + this.estimate_id + '/edit-section/' + this.section_id);
          } else {
            this.router.navigateByUrl('/estimates/' + this.estimate_id);
          }
        } else {
          this.snackBar.open(this.laravelResponse.message, 'OK', { duration: 6000 });
        }

      }
    );
  }

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private http: Http,
    private formBuilder: FormBuilder,
    private laravel: LaravelService,
    private snackBar: MdSnackBar,
    private slimLoadingBarService: SlimLoadingBarService
  ) { }

  ngOnInit() {

    this.slimLoadingBarService.start();

    this.activatedRoute.params.subscribe(
      (params) => {
        this.estimate_id = params.id;
        this.section_id = params.section_id;
      }
    );

    this.laravel.get_request('/get-estimate-section/' + this.estimate_id + '/' + this.section_id).subscribe(
      (data) => {
        this.laravelResponse = data.json();

        if (this.laravelResponse.status == 1) {
          this.section = this.laravelResponse.data;

          this.postForm = this.formBuilder.group({
          });

        } else {
          this.snackBar.open(this.laravelResponse.message, 'OK', { duration: 6000 });
          this.router.navigateByUrl('/404');
        }
        this.slimLoadingBarService.complete();

      }
    );

  }

}

Answer 1

You can't just put a random JS statement in the middle of your class. Classes contains property definitions and methods. Code goes in methods. What would a random JS statement in a class mean? When would it be executed? Who would call it?

Put your rowData.forEach inside a method called calcMaterialSubtotal or whatever, and then call it from wherever you want to call it from.

Answer 2

you trying foreach before constructor that's why you got error.

your foreach should like that. this this.countSubtotal(); wriet int onNgInit method();

 countSubtotal(){
     this.rowData.forEach(item => {
        this.material_sub_total = this.material_sub_total + item.material_unit_rate * item.qty + (item.material_margin / 100 * item.material_unit_rate * item.qty);
      });
}

i can't understand when you store data into rowdata but you need to call countSubtotal(); after store data into rowData.

onAddNewClick() {
    this.rowData.push({
      'title': '' as string,
      'qty': null as number,
      'material_margin': null as number,
      'material_unit_rate': null as number,
      'labour_unit_rate': null as number
    });
  this.material_sub_total  = 0;
  this.countSubtotal();
  }