1
votes

Appelez div une seule fois dans ngFor lorsque le premier ngIf se produit dans la boucle

J'ai ce code ici:

  <div *ngFor="let condition of interior_conditions; let i = index" class="condition-item-2">
    <div class="condition-title">{{condition.name}}</div>
    <div class="condition-content">
      <div class="row">
        <hr class="my-hr">
        <div class="col-12">
          <span *ngFor="let zone of zones">
            <span *ngFor="let poor_condition of zone.poor_conditions">
              <span *ngIf="poor_condition._id==condition._id" class="danger_zones">
          <span>
            Danger Zones:
          </span>
                {{zone.name}}
              </span>
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>

La chose est la suivante:

J'ai beaucoup de conditions et de zones dans ma base de données
Les zones ont de mauvaises et de bonnes conditions, elles peuvent n'avoir que de bonnes conditions, pas nécessairement les deux
Je parcours les conditions
Plus tard, je parcourt les mauvaises conditions
Donc, si une zone a de mauvaises conditions, je veux imprimer le nom des zones et avoir le «titre» des zones de danger UNE SEULE FOIS

Des idées?

angular ngfor

4 commentaires

Pourriez-vous s'il vous plaît ajouter plus de description? Voulez-vous dire que vous avez beaucoup de "zoons dangereux" et que vous n'en avez qu'un pour en montrer un?

La condition._id est-elle définie?

seulement la première itération de ngFor? donnez-nous plus de détails pour pouvoir vous aider

J'ai mis à jour ma question, merci pour vos efforts!

3 Réponses :

1
votes

En supposant que vous ne pouvez pas ou ne voulez pas déplacer le span en dehors de la boucle, vous pouvez ajouter un ngIf basé sur l'index:

<span *ngIf="i === 0"></span>

1 commentaires

Merci pour votre réponse, cela ne fonctionnerait pas car la condition peut se produire plus tard et non lors de la première itération. J'ai mis à jour ma question avec plus d'informations!

0
votes

vous devez déplacer la plage avec le titre Zones de danger.

  <div *ngFor="let condition of interior_conditions; let i = index" class="condition-item-2">
    <div class="condition-title">{{condition.name}}</div>
    <div class="condition-content">
      <div class="row">
        <hr class="my-hr">
        <div class="col-12">
          <span *ngFor="let zone of zones">
          <span>
            Danger Zones:
          </span>
            <span *ngFor="let poor_condition of zone.poor_conditions">
              <span *ngIf="poor_condition._id==condition._id" class="danger_zones">
                {{zone.name}}
              </span>
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>

1 commentaires

De cette façon, les zones de danger seront imprimées même si la zone n'est pas en mauvais état, ce que je ne veux pas.

0
votes

Je pense que le seul moyen qui peut être fait est d'utiliser un service, où une fonction aura saisi la condition et retournera les zones qui ont cette condition médiocre

0 commentaires