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

我在我的一个组件中定义了一个带有对象的数组，我想要计算sub sub total但是我得到错误，说重复标识符'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 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);
      });
}

我无法理解何时将数据存储到rowdata，但您需要在将数据存储到rowData后调用countSubtotal();。

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语句意味着什么？什么时候会执行？谁会称之为？

将file置于名为rowData.forEach的方法或其他内容中，然后从您想要调用它的地方调用它。

component.ts上的Angular 4 forEach（）

2 个答案: