1
votes

Appel d'une méthode à l'intérieur de * ngSi plusieurs fois angulaire

La méthode a est-elle appelée multiple dans * ngIf qui est à l'intérieur d'un * ngFor J'ai un exemple de code ci-dessous.

HTML Code
<div *ngFor="let item of groups">
 <div class="headerBar" *ngIf="showHeader(item)">
   <h3>Hello to the Board</h3>
 </div>
</div>

//Typescript Code
showHeader(item){
  let show = true;
  if(item.group === 'invalid' || item.group === 'unkown' || item.group === 'invisible'){
    show = false;
  }
  return show;
}

La méthode showHeader est-elle appelée plusieurs fois, dans le HTML comme dans * ngFor? Sinon, comment puis-je appeler la méthode plusieurs fois pour fournir la valeur de ma condition * ngIf.

angular

1 commentaires

je ne sais pas quelle est la question. ce que vous avez écrit devrait fonctionner correctement.

4 Réponses :

-1
votes

Oui, ce sera le cas.

En passant, vous voudrez peut-être examiner l'utilisation de ng-container: https://angular.io/guide/structural-directives#ng-container

<div *ngFor="let item of groups">
  <ng-container *ngIf="item.group === 'invalid' || item.group === 'unkown' || item.group === 'invisible'">
    <h3>Hello to the Board</h3>
  </ng-container>
</div>

3 commentaires

Pourquoi remplacer div par ng-container ? Il y a même une classe attachée au div dans la question.

À ma connaissance, car cela empêche spécifiquement cet élément d'être placé dans le DOM, lorsque la condition n'est pas remplie.

Oui, mais dans ce cas, OP a besoin d'un div supplémentaire dans le DOM étant donné qu'une classe lui est appliquée.

1
votes

C'est un comportement normal. Si vous ne contrôlez pas la stratégie de détection de changement, la fonction sera exécutée pour chaque cycle de détection de changement. Il est toujours préférable de ne pas utiliser de fonctions dans les interpolations et les liaisons de propriétés.

À la place, vous pouvez évaluer la condition dans le contrôleur, affecter la sortie à une variable et l'utiliser dans le modèle.

Contrôleur p >

<div *ngFor="let item of groups">
  <div class="headerBar" *ngIf="item?.show">
    <h3>Hello to the Board</h3>
  </div>
</div>

Modèle

ngOnInit() {
  this.groups.forEach(group => {
    if(group.group === 'invalid' || group.group === 'unkown' || group.group === 'invisible'){
      group.show = false;
    } else {
      group.show = true;
    }
  });
}

J'ai utilisé ngOnInit à titre d'illustration. Vous pouvez vérifier où la variable groups est réellement initialisée.

0 commentaires

3
votes

Utilisez cette approche si vous souhaitez que cette condition soit vérifiée dans plusieurs composants / emplacements en utilisant Pipes

<div *ngFor="let item of groups">
 <div class="headerBar" *ngIf="item | checkGroup">
   <h3>Hello to the Board</h3>
 </div>
</div>

@Pipe({
  name: 'checkGroup',
})
export class CheckGroupPipe implements PipeTransform {
  transform(inputText: any): any {
    if(item.group === 'invalid' || item.group === 'unkown' || item.group === 'invisible'){
      return false;
    }
    return true;
  }
}

Vous pouvez vérifier Documentation angulaire pour en savoir plus sur les tuyaux purs / impurs

0 commentaires

1
votes

ce que vous avez écrit me va bien. Vous pourriez simplifier votre méthode de cette façon, mais c'est la même logique.

showHeader(item){
  return (item.group !== 'invalid' && item.group !== 'unkown' && item.group !== 'invisible'); 
}

1 commentaires

Il est préférable d'utiliser des tuyaux plutôt que des appels de fonction dans le modèle angulaire, donc je vote pour la réponse ci-dessous