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>

我的component.ts

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

这是我到目前为止的结果

Answer 1

获取表的全部数据并尝试：

<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>

Answer 2

您所提供的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仅支持绑定到Iterables（例如数组）。 这可以由api处理，也可以使用rxjs map运算符或创建方法解决这个问题

组件

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

模板

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

我的建议是使用rxjs map运算符

Answer 3

我们在这里：

<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>

Structural Directives

如何循环多个JSON数组并在Angular JS中显示

3 个答案: