排列表

Question

我一直在使用数组中的这类数据

data:[
    0:{
     name:"Pervies, Peter"
     details:[
        {date:"2017-11-17",start_time:"08:00:00",end_time:"16:00:00"},
        {date:"2017-11-18",start_time:"08:00:00",end_time:"16:00:00"}
     ]
    }
    1:{
     name:"Ming, Edmund"
     details:[
        {date:"2017-11-17",start_time:"08:00:00",end_time:"17:00:00"},
        {date:"2017-11-18",start_time:"08:00:00",end_time:"17:00:00"}
     ]
    }
] 

  

我希望数据显示如下：

  

但它总是这样：

  

我使用下面的代码在表格中分发数据

<table>
      <thead>
            <tr class="text-center location text-white">
                <th>Employee</th>
                <th>Date</th>
                <th>Time In / Time Out</th>
            </tr>
      </thead>
      <tbody>
            <ng-container *ngFor= "let da of data; ">
            <tr *ngFor= "let s of da.details">
                  <td>
                     <strong>{{da.name}}</strong>
                  </td>
                  <td>
                     {{s.date}}
                  </td>
                  <td>
                    <input type="time [value]="s.start_time">
                    <strong>/</strong>
                    <input type="time [value]="s.end_time">
                  </td>
            </tr>
            </ng-container>
      </tbody>
</table>

你能帮忙我如何正确地在表格中显示我的数据。 我使用角度2

Answer 1

以下是用于在行和列中排列数据以及以所需格式显示日期的代码

<tbody>
        <ng-container *ngFor= "let da of data; ">
            <tr>
             <td [rowSpan]="da.details.length+1"> 
                 <strong>{{da.name}}</strong>
             </td>
            </tr>                   
            <ng-container *ngFor= "let s of da.details">
                <tr>
                    <td > {{s.date | date:'MMM dd, yyyy'}}</td>
                    <td><input type=time [value]="s.start_time"><strong>/</strong><input type=time [value]="s.end_time"></td>
                </tr>
            </ng-container>
        </ng-container>
</tbody>

Answer 2

怎么样？

idx.join(df.set_index(['uid','retailer','upload date']),on=['uid','retailer','upload date'])
Out[177]: 
   uid retailer upload date  price
0  123      GAL  2017-11-17  49.98
1  123      GUY  2017-11-17  12.00
2  345      GUY  2017-11-17   1.23
3  369      GAL  2017-11-17   1.02
4  678      GUY  2017-11-17  98.02
5  890      GAL  2017-11-17  98.23

Working demo

Answer 3

您正在第二个$ mount | grep '^/dev'| awk '{print $1}' /dev/disk1s1 /dev/disk1s4 内打印Employee因此，它会重复多次。

您需要先在ngFor内打印da.name，然后在第二个*ngFor中打印

试试这个

*ngFor

Answer 4

试试这个

在您的组件中使用def main(): print('The given table converst Celsius to Farenheit.'); print('Celsius \t Farenheit'); for C in range(1,21): F=(9/5)*C+32; print( C," {0:.1f}".format(F)); main() 自定义功能

parseDate

并通过这种方式调用要转换的函数和格式

parseDate(dateString: string): Date {
    if (dateString) {
        return new Date(dateString);
    } else {
        return null;
    }
}

注意：还要考虑表格格式的{{parseDate(s.date) | date: 'MMM dd, yyyy'}} 答案。

DEMO结果：

Answer 5

试试这样：

此处演示链接：demo

<table>
    <thead>
        <tr class="text-center location text-white">
            <th>Employee</th>
            <th>Date</th>
            <th>Time In / Time Out</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let d of data">
            <td>{{d.name}}</td>
            <td>
                <table>
                    <tr *ngFor="let c of d.details">
                        <td>
                            {{c.date}}
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr *ngFor="let s of d.details">
                        <td>
                            <input type="time" [value]="s.start_time">  
                            <input type="time" [value]="s.end_time">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>