0

I'm trying to make an Angular2 app, with the use of Twitter Bootstrap. However, when I try to make a dynamic list-group I bumped on a problem: I can't seem to have both *ngIf and *ngFor in the same element. So if I add another out- or inline element, my list-group is broken.

sample code:

<ul class="row mobile">
 <li class="col-md-4 list-group" *ngFor="#hall of halls">
  <a href="#" (click)="onSelect(hall)">
   <h4 class="list-group-item active">{{hall.name}}</h4>
  </a>
  <a class="list-group-item" 
   *ngFor="#machine of machineSet" 
   *ngIf="hall==currentHall">
     {{machine.id}} {{machine.name}}
   </a>
 </li>
</ul>

If anyone has a solution?

tim_costrop
  • 1
  • 4
  • See the dup -- it has a few solutions. – Mark Rajcok Jan 15 '16 at 23:10
  • `list-group` should be in the `ul` and `list-group-item` should be in children `li` or `a` I think you have a problem with your structure, how exactly do you want this to look like? – Langley Jan 16 '16 at 00:28

0 Answers0