角度绑定数据到表多'NgFor' [英] Angular Binding data to table multi 'NgFor'

问题描述

我有 data_header 和行列表 header_data:

 标头 = [{名称:数字#"，值:否"；},{名称:星期一"，值:2"},{ 名称:星期二"，值:3"},{ 名称:星期三"，值:4"},{名称:星期四"，值:5"},{名称:星期五"，值:6"},{名称:星期六"，值:7"},{名称:星期日"，值:8"},{名称:时间"，值:时间"；}];

行列表header_data:

datalist = [{ 编号:1，时间:06:30"},{ 编号:2，时间:07:30"},{ 编号:3，时间:08:30"},{ 编号:4，时间:09:30"},{ 编号:5，时间:10:30"}];

我绑定到 html

<table class="table table-bordered"><头><tr><th *ngFor="let hd of header">{{高清名称}}</th></tr></thead><tr *ngFor="let dt of datalist"><td *ngFor="let hd of header">{{ dt[hd['value']] }}</td></tr></tbody>

现在我有了 dataListDetail:

dataListDetail = [{天:2，数量:3，colspan_column: 2,描述: "col_Monday &&row_num_3 &&colspan 2 "},{天:5，数量:1，colspan_column: 3,描述: "col_Thursday &&row_num_1 &&colspan 3"}];

那么，如何将 dataListDetail 绑定到表到结果视图?

链接:Stackblitz 演示

谢谢！！！！

解决方案

一种方法(我不知道它是否是最好的)是创建一个具有 rowspan 和 desc 属性的网格数组.为了创建这个网格，首先所有元素都等于 {rowspan:1,desc:''}.

然后你循环你的dataListDetail"并将行跨度更改为 0 或colspan"的值.有些喜欢

this.grid=this.datalist.map(x=>[{rowspan:1,desc:''},{rowspan:1,desc:''},{rowspan:1,desc:''},{rowspan:1,desc:''},{rowspan:1,desc:''},{rowspan:1,desc:''},{rowspan:1,desc:''}])this.dataListDetail.forEach(x=>{const col=this.header.findIndex(c=>+c.value==x.day)-1this.grid[x.num-1][col].rowspan=x.colspan_columnthis.grid[x.num-1][col].desc=x.descfor (让 i=1;i<x.colspan_column;i++){this.grid[x.num-1+i][col].rowspan=0}})

之后，在您的 .html 中使用此网格来显示值.我们需要考虑表中的第一个 td 和最后一个 td 不使用grid"，使用 datalist[j].No 和 dataList[j].time 的值

有些喜欢

 <tr *ngFor="let row of grid;let i=index"><td>{{datalist[i].No}}</td><ng-container *ngFor="let col of row;let j=index;"><td *ngIf="col.rowspan>=1";[style.background-color]="col.desc?'yellow':null";[attr.rowspan]=col.rowspan>1?col.rowspan:null">{{ col.desc||'&nbsp;'}}</td></ng-容器><td>{{datalist[i].time}}</td></tr></tbody>

注意:如果 desc，我更新 html 以显示为黄色，而不是 col.rowspan>=1.这允许以黄色显示只需要一个单元格的事件

参见stackblitz>

I have data_header and row list header_data:

 header = [
    { name: "Num#", value: "No" },
    { name: "Monday", value: "2" },
    { name: "Tuesday", value: "3" },
    { name: "Wednesday", value: "4" },
    { name: "Thursday", value: "5" },
    { name: "Friday", value: "6" },
    { name: "Saturday", value: "7" },
    { name: "Sunday", value: "8" },
    { name: "Time", value: "time" }
  ];

row list header_data:

datalist = [
    { No: 1, time: "06:30" },
    { No: 2, time: "07:30" },
    { No: 3, time: "08:30" },
    { No: 4, time: "09:30" },
    { No: 5, time: "10:30" }
  ];

I binding to html

<div class="table table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th *ngFor="let hd of header">
                    {{hd.name}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let dt of datalist">
                <td *ngFor="let hd of header">
                    {{ dt[hd['value']] }}
                </td>
            </tr>
        </tbody>
    </table>
</div>

Now I have dataListDetail:

dataListDetail = [
    {
      day: 2,
      num: 3,
      colspan_column: 2,
      desc: "col_Monday && row_num_3 && colspan 2 "
    },
    {
      day: 5,
      num: 1,
      colspan_column: 3,
      desc: "col_Thursday && row_num_1 && colspan 3"
    }
  ];

Then, How do I can binding dataListDetail to table to result view?

Link: Stackblitz Demo

Thank you!!!!

解决方案

One aproach (I don't know if it's the best) is create a grid array with rowspan and desc property. For create this grid, at first all elements are equal to {rowspan:1,desc:''}.

Then you loop over your "dataListDetail" and change the rowspan by 0 or the value of your "colspan". Some like

this.grid=this.datalist.map(x=>[{rowspan:1,desc:''},{rowspan:1,desc:''},{rowspan:1,desc:''},
           {rowspan:1,desc:''},{rowspan:1,desc:''},{rowspan:1,desc:''},{rowspan:1,desc:''}])

this.dataListDetail.forEach(x=>{
  const col=this.header.findIndex(c=>+c.value==x.day)-1
  this.grid[x.num-1][col].rowspan=x.colspan_column
  this.grid[x.num-1][col].desc=x.desc
  for (let i=1;i<x.colspan_column;i++)
  {
    this.grid[x.num-1+i][col].rowspan=0
  }
})

After,in your .html use this grid to show the values. We need take account that the fisrt td and the last td in the table not use "grid", use the values of the datalist[j].No and dataList[j].time

Some like

        <tbody>
            <tr *ngFor="let row of grid;let i=index">
                <td>{{datalist[i].No}}</td>
                <ng-container *ngFor="let col of row;let j=index;">
                    <td *ngIf="col.rowspan>=1" 
                         [style.background-color]="col.desc?'yellow':null"
                         [attr.rowspan]="col.rowspan>1?col.rowspan:null">
                        {{ col.desc|| '&nbsp;' }}
                    </td>
                </ng-container>
                <td>{{datalist[i].time}}</td>
            </tr>
        </tbody>

NOTE: I update the html to show in yellow if desc, not if col.rowspan>=1. this allow show in yellow an event with only need one cell

See the stackblitz

这篇关于角度绑定数据到表多'NgFor'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！