Début ici , j'essaye de sommer une propriété spécifique pour un tableau d'objets en utilisant la fonction de réduction de javascript dans les liaisons angulaires.
Composant
<div>{{ totals.map(t => t.itemCount).reduce((a, b) => a + b, 0) }}</div>
HTML
totals: total[] = [{itemCount:1},{itemCount:2},{itemCount:3}, {itemCount:4}];
Avec ce qui précède, j'obtiens l'erreur: "Les liaisons ne peuvent pas contenir d'attributions"
Merci d'avance
EDIT
J'ai marqué la réponse fournie par @quirimmo comme correcte, mais je voulais aussi adresser la réponse @jo_va.
Je pensais que fournir une méthode pour angulaire à l'intérieur de mon composant était la bonne approche @quirimmo, mais dans cas, le composant a été compilé JIT à la demande du client et pour le moment, je ne sais toujours pas comment ajouter cette méthode dynamiquement pendant la construction de ce composant. Cela m'a conduit à l'approche Expression dans mon HTML et en évitant sciemment la réponse de @ jo_va sur les meilleures pratiques.
Ma résolution était de transmettre un service en tant qu'objet au composant et de placer la méthode dans ce service pour référence .
Merci pour l'aide SO
4 Réponses :
Définissez une fonction à l'intérieur de votre composant qui renvoie la valeur réduite et à l'intérieur de la liaison appelez cette fonction du composant:
const totals = [{itemCount:1},{itemCount:2},{itemCount:3}, {itemCount:4}];
console.log(totals.reduce((acc, val) => acc += val.itemCount, 0));
Mapper et réduire renvoie un nouveau tableau. C'est de là que vient votre erreur.
Vous pouvez utiliser un getter comme celui-ci https://stackblitz.com/edit/angular-whrfxp < / a>. Le modèle ne doit pas contenir de calculs.
Votre fonction réduire fonctionne bien. Cependant, utiliser des expressions dans des liaisons angulaires est une mauvaise pratique.
Déplacez votre logique vers votre composant et appelez une méthode ou un getter.
totals.reduce ((a, b) => a + = (b. itemCount), 0) fonctionne