合并具有相同值的div [英] merge divs with same value

问题描述

我正在尝试合并具有相同编号的div，以便查看星期及其编号.

这是我的html的样子

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

我必须使用 * ngIf 还是仅使用CSS?我已经阅读了此

解决方案

通过创建groupBy管道并在项目中包含Bootstrap 4，可以通过以下方式进行操作.这是一个简单的演示示例(您必须进行样式设置)演示:

groupby.pipe.ts

 从'@ angular/core'导入{Pipe，PipeTransform};@Pipe({name:'groupBy'})导出类GroupByPipe实现了PipeTransform {transform(collection:any []，property:string):any [] {//如果对象数组尚不存在，则防止应用程序中断if(！collection){返回null；}const groupedCollection = collection.reduce((previous，current)=> {if(！previous [current [property]]){previous [当前[属性]] = [当前]；} 别的 {previous [current [property]].push(current);}返回上一个}，{});//这将返回一个对象数组，每个对象包含一组对象返回Object.keys(groupedCollection).map(key =>({key，value:groupedCollection [key]}));}} 

html代码

 < div class ="table table-borderless">< div class ="col-md-12文字中心边框">< span> {{currentMonthName}}</span>& nbsp;< span> {{currentYear}}</span></div>< div class ="d-flex">< div class =文本中心的m-2边框" * ngFor =让一天的日子| groupBy:'weekNumber'">{{day.key}}< table class ="table">< tbody>< tr>< th scope ="row" * ngFor ="day.value的x x"> {{x.number}}</th></tr>< tr>< th scope ="row" * ngFor ="day y of day.value"> {{y.name}}</th></tr></tbody></table></div></div></div> 

I am trying to merge the divs that have the same number in order to see the week and its number.

This is how my html looks like

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

do I have to use *ngIf or just css? I have read this How to merge two divs, but I don't know where ti include the if statement

this is the class I am using

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

and this is how it should look afet merging

解决方案

You can do it the following way by creating a groupBy pipe and including Bootstrap 4 in the project. Here is a plain working demo (you will have to do the styling) demo:

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 code

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

这篇关于合并具有相同值的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！