Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Correct way to use ngFor loop on selector directive? It doesn't seem to work.

See original GitHub issue

   <div class="cards-flex-container">
      <mz-card *ngFor="let Package of packages; last as isLast; odd as isOdd" class="col-12" [class.last-col]="isOdd">
            <p><span class="key">Package Name:</span>
               <span class="value">{{ Package.Name }}</span>
            </p>
            <p>
               <span class="key">Description:</span>
               <span class="value">{{ Package.Description }}</span>
            </p>
            <p>
               <span class="key">Price:</span>
               <span class="value">${{ Package.OriginalPackagePrice }}</span>
            </p>
            <p>
               <span class="key">Package Discount:</span>
               <span class="value">{{ Package.Discount.Amount * 100 }}%</span>
            </p>
            <p class="no-margin-bottom">
               <span class="key">Package Price:</span>
               <span class="value">${{ Package.DiscountedPackagePrice }}</span>
            </p>
            <!--<hr *ngIf="!isLast" />-->

      </mz-card>
   </div>

This does not work. It produces blank cards. But if I change

selector_directives_doesnt_work

<mz-card *ngFor="let Package of packages; last as isLast; odd as isOdd" class="col-12" [class.last-col]="isOdd">

<div *ngFor="let Package of packages; last as isLast; odd as isOdd" class="card-panel col-12" [class.last-col]="isOdd">

It works as expected. selector_directive_works

Expected Behavior

Interpolation should work inside of selector directives.

Current Behavior

It doesn’t work.

If this is a big change, I can just continue using regular Materialize, since it doesn’t provide much gain to use the selector directive. But I wanted to bring it to your attention since it might be happening with other selector directives as well.

Issue Analytics

State:
Created 6 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

scotecommented, Oct 30, 2017

This will be fixed in our next release.

1reaction

scotecommented, Oct 18, 2017

You need to include your content inside <mz-card-content> tag.

<div class="cards-flex-container">
  <mz-card *ngFor="let Package of packages; last as isLast; odd as isOdd" class="col-12" [class.last-col]="isOdd">
    <mz-card-content>
      <p><span class="key">Package Name:</span>
          <span class="value">{{ Package.Name }}</span>
      </p>
      <p>
          <span class="key">Description:</span>
          <span class="value">{{ Package.Description }}</span>
      </p>
      <p>
          <span class="key">Price:</span>
          <span class="value">${{ Package.OriginalPackagePrice }}</span>
      </p>
      <p>
          <span class="key">Package Discount:</span>
          <span class="value">{{ Package.Discount.Amount * 100 }}%</span>
      </p>
      <p class="no-margin-bottom">
          <span class="key">Package Price:</span>
          <span class="value">${{ Package.DiscountedPackagePrice }}</span>
      </p>
      <!--<hr *ngIf="!isLast" />-->
    </mz-card-content>
  </mz-card>
</div>