javascript - 在 1 行中创建包含 2 个不同数据的嵌套表

Question

我正在构建一个具有相同列的嵌套表，但对于行，我必须每天插入 2 周时间的数据，如下面的屏幕截图所示:

我创建了简单的数据并在第 1 周的时间后调用它，因此它们在 1 行中对齐，如下所示:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Schedule Timings</h2>
<div class="container">
    <div class="row">
        <div class="panel panel-default">

            <!-- Default panel contents -->
            <!-- <div class='panel-heading'>Product List</div> -->
            <div class="panel-body">
                <table class="table table-hover table-bordered ">
                    <thead>
                        <tr>
                            <th><b>ID</b></th>
                            <th>Type</th>
                            <th>Mon</th>
                            <th>Tue</th>
                            <th>Wed</th>
                            <th>Thur</th>
                            <th>Fri</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of filteredItems">
                            <td>{{item.id}}</td>
                            <td><b>{{item.type}}</b></td>
                            <td>{{item.monday}} </td>
                            <td>{{item.tuesday}} </td>
                            <td>{{item.wednesday}} </td>
                            <td>{{item.thursday}} </td>
                            <td>{{item.friday}}</td>
                            <td>{{item.total}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

schedule.ts 文件:

    export class Schedule {
    constructor(
        public id: number,
        public type: string,
        public scheduleID: number,
        public weekNumber: number,
        public monday: string,
        public monday2: string,
        public tuesday: string,
        public tuesday2: string,
        public wednesday: string,
        public wednesday2: string,
        public thursday: string,
        public thursday2: string,
        public friday: string,
        public friday2: string,
        public total: number,
        public total2: number

     ) {
    }
    }

数据.ts:

    import {Schedule} from './schedule';
    export var scheduleList: Schedule[] = [
    {
        "id": 1, 
        "type": "math",
        "scheduleID": 2,
        "weekNumber": 1,
        "monday": "10",
        "monday2": "10",
        "tuesday": "10",
        "tuesday2": "10",
        "wednesday": "10",
        "wednesday2": "10",
        "thursday": "10",
        "thursday2": "10",
        "friday": "10",
        "friday2": "10",
        "total": 40,
        "total2": 40
    },
    {
        "id": 2, 
        "type": "math",
        "scheduleID": 2,
        "weekNumber": 1,
        "monday": "10",
        "monday2": "10",
        "tuesday": "10",
        "tuesday2": "10",
        "wednesday": "10",
        "wednesday2": "10",
        "thursday": "10",
        "thursday2": "10",
        "friday": "10",
        "friday2": "10",
        "total": 40,
        "total2": 40
    },
    {
        "id": 3, 
        "type": "math",
        "scheduleID": 3,
        "weekNumber": 1,
        "monday": "10",
        "monday2": "10",
        "tuesday": "10",
        "tuesday2": "10",
        "wednesday": "10",
        "wednesday2": "10",
        "thursday": "10",
        "thursday2": "10",
        "friday": "10",
        "friday2": "10",
        "total": 40,
        "total2": 40
    },
    {
        "id": 4, 
        "type": "science",
        "scheduleID": 4,
        "weekNumber": 1,
        "monday": "10",
        "monday2": "10",
        "tuesday": "10",
        "tuesday2": "10",
        "wednesday": "10",
        "wednesday2": "10",
        "thursday": "10",
        "thursday2": "10",
        "friday": "10",
        "friday2": "10",
        "total": 40,
        "total2": 40
    },
    ]

component.ts 文件:

    import { Component, OnInit } from '@angular/core';
    import { Schedule } from './schedule';
    import { scheduleList } from './data';

    @Component({
    selector: 'schedule-cmp',
    moduleId: module.id,
    templateUrl: 'schedule.component.html'
    })

    export class scheduleComponent implements OnInit {
    ngOnInit() { }
    filteredItems: Schedule[];
    items: Schedule[];
    constructor() {
        this.filteredItems = scheduleList;
        this.init();
    }
    init() {
         console.log(scheduleList);
    }
    }

所以我的问题是，我应该如何将第 2 周的数据插入到第 1 周的每周数据下方，以便它们对齐在一起，如屏幕截图所示？ rowspan 是一种选择，但它会在 ID 和 Type 下面创建额外的空间，这是我不想要的。 感谢您的帮助，提前致谢!

Answer 1

我会使用数组来存储每个工作日的值。

{
        "id": 1, 
        "type": "math",
        "timeID": 2,
        "weekNumber": 1,
        "monday": ["10", "10"],
        "tuesday": ["10", "10"],
        "wednesday": ["10", "10"],
        "thursday": ["10", "10"],
        "friday": ["10", "10"],
        "total": ["40", "40"],
    }

这样即使您将来需要添加第三个值，也不需要在模型中添加其他属性。

为了在表格中显示它，您可以使用 *ngFor 指令，就像您现在对行所做的那样。

<tbody>
  <tr *ngFor="let item of filteredItems">
    ...

    <td>
      <ng-container *ngFor="let value of item.monday">
         <div>{{value}}</div>
      </ng-container>
    </td>

    ...           
  </tr>
</tbody>

您可以在 StackBlitz 上实时查看它:https://stackblitz.com/edit/angular-wbzzfb