CODEWITHSUNDEEP
angularngfor
Iraklis Bekiaris
Iraklis Bekiaris

Reputation: 1221

Call div only once in ngFor when first ngIf occurs inside the loop

I have this code right here:

  <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>

The thing is this:

Any ideas?

Upvotes: 2

Views: 2089

Answers (3)

Iraklis Bekiaris
Iraklis Bekiaris

Reputation: 1221

I Think the only way that can be done is through a Service, where a function will have input the condition and return the zones that have this condition poor

Upvotes: 0

Leandro Hern&#225;ndez Mira
Leandro Hern&#225;ndez Mira

Reputation: 837

you should move the span with title Danger Zones.

  <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>

Upvotes: 0

Phix
Phix

Reputation: 9890

Assuming you can't or don't want to move the span outside the loop, you can add an ngIf based on the index:

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

Upvotes: 2

Related Questions