合并具有相同值的 div

user2004 发表于 Dev

用户2004

我正在尝试合并具有相同编号的 div，以便查看周数及其编号。

这就是我的 html 的样子

<div class="wrapper clearfix">
        <div class="left">
            <label class="kw">WeekNo.</label>
        </div>
        <div class="right week-number" *ngFor="let day of days">
            <label class="number-label"><span>{{day.weekNumber}} </span></label>
        </div>
    </div>

我必须使用*ngIf还是只使用css？我已经阅读了如何合并两个 div，但我不知道在哪里包含该if语句

这是我正在使用的课程

export class Day {
    number: number;
    weekDay: number;
    name: string;
    weekNumber: number;

    constructor(number: number, weekDay: number, name: string, weekNumber: number
       ) {
            this.number = number;
            this.weekDay = weekDay;
            this.name = name;
            this.weekNumber = weekNumber;
        }
}

这就是合并后的样子

乔尔约瑟夫

您可以通过以下方式创建 groupBy 管道并在项目中包含 Bootstrap 4。这是一个简单的工作演示（您必须进行样式设置）演示：

groupby.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(collection: any[], property: string): any[] {
        // prevents the application from breaking if the array of objects doesn't exist yet
        if(!collection) {
            return null;
        }

        const groupedCollection = collection.reduce((previous, current)=> {
            if(!previous[current[property]]) {
                previous[current[property]] = [current];
            } else {
                previous[current[property]].push(current);
            }

            return previous;
        }, {});

        // this will return an array of objects, each object containing a group of objects
        return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
    }
}

html代码

<div class="table table-borderless ">
  <div class="col-md-12 text-center border"><span>{{currentMonthName}}</span>&nbsp; <span>{{currentYear}}</span></div>

    <div class="d-flex">
      <div class=" text-center m-2 border" *ngFor="let day of days | groupBy:'weekNumber'">
        {{day.key}}
      <table class="table">
          <tbody>
            <tr>
              <th scope="row"  *ngFor="let x of day.value ">{{x.number}}</th>
            </tr>
            <tr>
              <th scope="row"  *ngFor="let y of day.value ">{{y.name}}</th>
            </tr>

          </tbody>
      </table>
      </div>
    </div>

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。