Как зациклить несколько массивов JSON и отображать в угловых JS

Question

Я создаю новую систему управления школой и хочу отобразить список факультетов и курсов, предлагаемых департаментом, я фактически сохраняю курс в формате JSON в базе данных

Это мой ответ JSON

[
    {"course_code":"PHP101","course_title":"Introduction to Physics"},
    {"course_code":"PHP101d","course_title":"dkndk"},
    {"course_code":"PHP1091","course_title":"Introduction to House"}
]

мой курс conponnent.html

<table id="responsive" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>Department</th>
            <th>Level</th>
            <th>Courses</th>

        </tr>
    </thead>
    <tbody>
    <tr *ngFor="let emp of table_list" class="gradeX">
        <td>{{emp_id}}</td>
        <td>{{emp.course_code}}</td>
        <td>{{emp.level}}</td>
        <td>
            <li *ngFor="let ok of emp.department_course">
                {{ok}}
            </li>
        </td>
    </tr>
    </tbody>
</table>

мой компонент.ts

fetch() {
    this._userService.generalInfo().subscribe((response: any) => {
        this.table_list = response._data;
    });
}

это мой результат до сих пор

Answer 1

База предоставленных вами ответов API

Пример ответа

[{
  department_course: [{"course_code":"PHP101","course_title":"Introduction to Physics"}] ,
  department_name: "Department of Physics Electronics", 
  id: 1 ,
  level: "200"
} , 
]

шаблон

<table id="responsive" class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Department</th>
      <th>Level</th>
      <th>Courses</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let dep of table_list" class="gradeX">
      <td>{{ dep.id}}</td>
      <td>{{ dep.department_name }}</td>
      <td>{{ dep.level }}</td>
      <td>
        <span*ngFor="let c of dep.department_course || []">
          {{c.course_code}}</span> , <span>{{c.course_title}}
        </span>
      </td>
    </tr>
  </tbody>
</table>

Обновлено:

устранение этой ошибки NgFor поддерживает только привязку к итерируемым объектам, таким как массивы. thisможет обрабатывать API или вы можете использовать rxjs map оператор или создать метод для решения этой

компонента

parse(jsonString = '[]') { return JSON.parse(jsonString)};

template

  <span *ngFor="let c of parse(dep.department_course)">..</span>

я рекомендую использовать карту rxjs оператор

Answer 2

Вот так:

<td *ngIf="emp.department_course">
    <ng-container *ngFor="let c of emp.department_course">
        <span>{{c.course_code}}</span> , <span>{{c.course_title}}</span>
    </ng-container>
</td>

Структурные директивы

Answer 3

Получить все данные таблицы и попробовать:

<table id="responsive" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>Department</th>
            <th>Level</th>
            <th>Courses</th>

        </tr>
    </thead>
    <tbody>
    <tr *ngFor="let emp of table_list" class="gradeX">
        <td>{{emp_id}}</td>
        <td>{{emp.department}}</td>
        <td>{{emp.level}}</td>
        <td *ngIf="emp.department_course">
          <ng-container *ngFor="let c of emp.department_course">
            <span>{{c.course_code}}</span> , <span>{{c.course_title}}</span>
          </ng-container>
        </td>
    </tr>
    </tbody>
</table>