Невозможно получить значения в html, используя ngfor ANGULAR

Question

У меня есть массив, и в нем хранятся все эти данные

Form values: {
  "employees": [
    {
      "firstName": "R",
      "lastName": "B",
      "repeat_sun": true,
      "repeat_mon": true,
      "repeat_tue": false,
      "skills": [
        {
          "skill": "JAVA",
          "exp": "2"
        }
      ],
      "userdays": [
        "Sun",
        "Mon"
      ]
    }
  ]
}

Я сохранил эти значения в tempArray, и я обращаюсь к нему в моем html

шаблоне

<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col">first name</th>
            <th scope="col">last name</th>
            <th scope="col">skill and exp</th>
            <th scope="col">days</th>
        </tr>
    </thead>
    <tbody>
        <tr
       *ngFor="let details of tempArray"
                id="{{ details.empIndex }}">
            <td> {{ details.firstName }}</td>
            <td>{{ details.lastName }}</td>
            <td>  <span *ngFor="let data of details.skills">
                    {{ data.skill }} and {{ data.exp }},
                    <br />
                  </span>
            </td>

            <td> <span *ngFor="let data of details.userdays">
                    {{ details.userdays}}
                    <br />
                  </span>
           </td>
        </tr>
</tbody>
</table>

Я могу отобразить все значения, кроме дней пользователя ... Мне нужно отобразить значения дней пользователя

https://stackblitz.com/edit/angular-hdfeqs

Answer 1

Так сохраняется ваш массив. В вашем массиве нет пользовательских дней. Пользовательские дни сохраняются как плоские.

Answer 2

Вы не добавляли пользователей в окончательный массив:

private mapFormEmployee(
empIndex: number
): {
firstName: string;
lastName: string;
repeat_sun: boolean;
repeat_mon: boolean;
repeat_tue: boolean;
skills: { skill: string; exp: string }[];
userdays: []. // <---- this was missing
} {
const employeeFormGroup = this.employees().at(empIndex);

return {
  firstName: employeeFormGroup.get("firstName").value,
  lastName: employeeFormGroup.get("lastName").value,
  repeat_sun: employeeFormGroup.get("repeat_sun").value,
  repeat_mon: employeeFormGroup.get("repeat_mon").value,
  repeat_tue: employeeFormGroup.get("repeat_tue").value,
  skills: employeeFormGroup
    .get("skills")
    .value.map((_, skillIndex) => this.mapFormSkill(empIndex, skillIndex)),
  userdays: employeeFormGroup.get("userdays").value // <--- and this
};

}

И затем выводили его:

<td> <span *ngFor="let data of details.userdays;let i = index;">
     {{ data }}
     <br />
</span></td>