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

Posted 2023-03-05

【中文标题】在 1 行中创建具有 2 个不同数据的嵌套表

【英文标题】：Create nested table with 2 different data in 1 row

【发布时间】：2019-12-20 09:16:24

【问题描述】：

我正在构建一个具有相同列的嵌套表，但对于行，我必须每天插入 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);
    
    

所以我的问题是，我应该如何在每周第 1 数据下方插入第 2 周的数据，以便它们对齐在一起，如屏幕截图所示？ rowspan 是一种选择，但它会在 ID 和类型下方创建额外的空间，这是我不想要的。 任何帮助表示赞赏，在此先感谢您！

【问题讨论】：

“更好”在旁观者的眼中，问题中没有客观标准表明如何判断一个答案是正确的。这就是为什么这类问题通常在 Stack Overflow 上off-topic。

也就是说，使用数组而不是编号属性通常是个好主意。此外，td 的 rowspan 属性正是屏幕截图所要求的。

这就是我要问的问题，第一个是如何以其他方式显示数据，包括使用行跨度，行跨度也重复第 2 列中的数据，这是我不希望的，鉴于我正在使用*ngFor 条件。第二，如果我能以更好的方式更改数据，而不是仅仅将 2 周的数据组合在一起。我不认为这个问题是题外话。

【参考方案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

【讨论】：

感谢 Nikhil 对 json 文件的更改提出建议。我已经更新了我的问题并希望在构建嵌套表方面得到帮助。

@TheUnKnown - 我读了你编辑的问题。为了正确对齐它们，我们需要进行一些 CSS 更改。我正在尝试在StackBlitz 上重现此内容。您也可以将您的component.ts 添加到问题中吗？或者至少是一些过滤项目的值。

@TheUnKnown - 感谢您添加它。结帐此StackBlitz。我正在使用我的答案中描述的数组，你可以看到你想要的值。

如果你可以将json数据转换成使用数组，那么你可以马上在StackBlitz中使用修改后的HTML。如果您有任何问题，请告诉我。

是的，您可以使用<td><div> item.monday </div><div> item.monday2 </div></td>，而不是使用*ngFor。但我建议使用数组。