Angular 5 trying to loop through array with ngIf's to show spans gives me all of them - angular5

Question

I am trying to loop trough an array of objects that have an array of "dependent"-objects in them. For every dependent there is an array of, up to three ENUMS, AssignmentRoles. So for every AssignmentRole I want to display some html. My problem is I am displaying all three of the AssignmentRoles for every dependent even though they dont have every AssignmentRole in their AssignmentRole Array. This is what I am working with, and trying to do:
The object:
and this is the html:
<tr *ngFor="let assignment of filteredAssignments">
<td>
<ul class="dependent-entities" *ngFor="let dependent of assignment.DependentEntities">
<li class="filterable">
<span class="assignment-roles">
<ng-container *ngIf="dependent.AssignmentRoles[0] == AssignmentRole.HRResponsible">
<span class="hr-responsible"
HR
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="HRResponsible">
</ng-container>
<ng-container *ngIf="dependent.AssignmentRoles[1] == AssignmentRole.SoFContact">
<span class="sof-contact">
SF
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="SoFContact">
</ng-container>
<ng-container *ngIf="dependent.AssignmentRoles[2] == AssignmentRole.GeneralContact">
<span class="general-contact">
G
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="GeneralContact">
</ng-container>
</span>
</li>
</ul>
</td>
</tr>
*Edit, I placed the spans in ng-containers and removed the ngFor. Here is an image of how it looks. The first row is correct, the second should not be empty, the third is correct and the fourth should not be empty... So every other one is empty..

Answer 1

I got it working by removing the index e.g *ngIf="dependent.AssignmentRoles == AssignmentRole.GeneralContact"