Question

我正在构建具有相同列的嵌套表，但是对于行，我必须每天插入2周的数据，如下面的屏幕快照所示：

我已经创建了简单的数据，并在第一周的工作时间后对其进行了调用，因此它们在第一行中对齐，如下所示：

<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

     ) {
    }
    }

data.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);
    }
    }

所以我的问题是，我应该如何将第二周的数据插入到每周第一数据的下方，以便它们如屏幕截图所示对齐？ 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

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

1 个答案: