Angular 5, пытающийся перебрать массив с помощью ngIf, чтобы показать span, дает мне их все

Question

Я пытаюсь зациклить массив объектов, в которых есть массив "зависимых" -объектов. Для каждого зависимого существует массив, до трех ENUMS, AssignmentRoles. Так что для каждого AssignmentRole я хочу отобразить HTML. Моя проблема в том, что я отображаю все три AssignmentRoles для каждого зависимого, даже если у них нет каждого AssignmentRole в их массиве AssignmentRole. Это то, с чем я работаю и пытаюсь сделать:

Объект:

и это 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>

* Правка, я поместил пролет в ng-контейнер и удалил ngFor. Вот изображение того, как это выглядит. Первая строка верна, вторая не должна быть пустой, третья верна, а четвертая не должна быть пустой ... Так что все остальные пустые.

Answer 1

Я заработал, удалив индекс, например *ngIf="dependent.AssignmentRoles == AssignmentRole.GeneralContact"