J'utilise une table angulaire 6 et HTML. J'ai montré une liste de liste JSON dans le tableau. Je souhaite montrer au demandeur de programme total de la faculté de faculté pour séparer la colonne («Total des facultés») mais je ne peux pas le faire. S'il vous plaît, guidez-moi pour résoudre ce problème.
Je veux faire comme ça: 
< P> Lien Stackblitz
Mon fichier TS: mon fichier html:
3 Réponses :
Voici une solution de travail complète: Stackblitz Démo composant.ts composant.html
Merci de votre coopération. J'ai trouvé le candidat total de la faculté sage, mais comment montrer dans le tableau dans une autre colonne
Waoue !! ça a fonctionné. Merci beaucoup. Vous avez sauvé ma grande partie de temps.
Créez d'abord un tableau regroupé par // code html p> shortName code> et calculez le total, puis ajoutez Rowspan code> Attribut basé sur la condition. import {Component, OnInit} from '@angular/core';
@Component({
selector: 'ngbd-datepicker-popup',
templateUrl: './datepicker-popup.html'
})
export class NgbdDatepickerPopup implements OnInit {
groupbyShortName = {};
admitList = [
{
shortName: 'FSIT',
programName: 'BSc in CSE',
totalApplicant: 10
},
{
shortName: 'FSIT',
programName: 'BSc in SWE',
totalApplicant: 5
},
{
shortName: 'FSIT',
programName: 'BSc in EEE',
totalApplicant: 15
},
{
shortName: 'FAHS',
programName: 'BSc in LLB',
totalApplicant: 10
},
{
shortName: 'FAHS',
programName: 'BSc in English',
totalApplicant: 5
},
{
shortName: 'FAHS',
programName: 'BSc in Pharmacy',
totalApplicant: 8
}
];
constructor() {
this.groupbyShortName = this.admitList.reduce((accu, {shortName, totalApplicant, programName}) => {
if(!accu[shortName])
accu[shortName] = {count: 0, sum: 0, shortName, totalApplicant, programName};
accu[shortName].count += 1;
accu[shortName].sum += totalApplicant;
return accu;
}, {});
}
ngOnInit() { }
}
La solution la plus simple consiste à trouver l'index de votre élément actuel dans les lignes groupées:
Stackblitz tout le meilleur
Belle solution. Je suis sûr que cela fonctionne, mais n'est-ce pas une recommandation générale de ne pas utiliser de fonctions dans des vues HTML? quelque chose comme un état de vue propre / immuable / toujours cohérent. Dans ce cas, je ne vois pas de problème. Mais en général pour la détection de changement.
Vous avez raison, mais aussi, en général, je préfère éviter de remplir le modèle avec de longues déclarations, préférez Getter, stratégie sur PUSH et NGXS State Manager, tout le meilleur;)
Nous convenons que pour résoudre la tâche des devoirs de quelqu'un, cela serait surchargé :)