角4的forEach（）上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); 
}); 

我在我的組件中的一個定義的對象的陣列，我想calc下子總但我得到錯誤說重複標識符「rowData」。 如果可能的話，任何人都可以建議我如何使用foreach或者即使有可能嗎？我正在使用cli創建角4。組件的

全部代碼放在這裏

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

你想的foreach構造，這就是爲什麼你得到錯誤之前。

你的foreach應該是這樣的。這this.countSubtotal(); wriet int onNgInit方法（）;

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); 
     }); 
} 

我不明白，當你把數據存儲進rowdata但你需要將數據存儲到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(); 
    } 

Answer 2

你不能在你的班級中間放一個隨機的JS語句。類包含屬性定義和方法。代碼進入方法。一堂課中隨機的JS聲明意味着什麼？何時執行？誰會打電話給他？

把你的rowData.forEach放在一個名爲calcMaterialSubtotal的方法裏面，然後從你要調用它的地方調用它。