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 utiliserArray.reduce
au lieu deforEach
- 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
Vous devez vous connecter pour publier un commentaire.
vous essayer foreach avant de constructeur, c'est pourquoi vous avez obtenu d'erreur.
votre foreach doit comme ça. cette
this.countSubtotal()
; wriet int onNgInit méthode();je ne comprends pas lorsque vous stockez des données dans
rowdata
mais vous devez appelercountSubtotal();
après de stocker des données dans rowData.Vous ne pouvez pas simplement mettre un hasard JS instruction dans le milieu de votre classe. Les Classes contient les définitions de propriétés et de méthodes. Code va dans les méthodes. Ce serait un hasard JS déclaration d'une classe moyenne? Quand serait-il être exécuté? Qui serait-il appeler?
Mettre votre
rowData.forEach
à l'intérieur d'une méthode appeléecalcMaterialSubtotal
ou que ce soit, et ensuite l'appeler à partir de l'endroit où vous voulez l'appeler à partir.