Angulaire 4 forEach() sur le composant.ts

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

J'ai défini un tableau avec un objet dans l'un de mes composants et je veux calc sous-total, Mais j'obtiens un message d'erreur indiquant que dupliquer l'identificateur 'rowData'.
Si possible quelqu'un pourrait-il me suggérer comment utiliser foreach ou même si c'est possible? Je suis à l'aide angulaire 4 créé avec la cli.

Code complet de la composante va ici

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();
}
);
}
}
  • Avez-vous essayé this.rowData.forEach.... Par la façon dont je pense que vous devriez utiliser Array.reduce au lieu de forEach
  • Une autre option sont les tuyaux. github.com/fknop/angular-pipes
  • j'ai utilisé ce.rowData.forEach mais toujours pas de travail, elle suggère de jeton inattendu sur VS Code @Diego
  • Je veux calculer sur le composant de sorte que par la suite je pourrais envoyé au serveur via http post. @ThinkingMedia
  • essayez de changer le type de la matrice de any à Array et aussi poster le code complet de la classe ainsi
  • Je l'ai fait, mais quand même eu une autre erreur sur VS Code lui-même rowData: Array<Object> = [{ 'title': 'Produit' as string, 'qté': null en tant que numéro, material_margin': null en tant que numéro, material_unit_rate': null en tant que numéro, labour_unit_rate': null nombre }];
  • Merci de poster le code complet de la classe
  • veuillez vérifier, j'ai mis à jour la question! @Mr_Perfect

InformationsquelleAutor Suson Waiba | 2017-06-16