Javascript 在表中排列数据

我一直在研究数组中的这种数据

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"}
     ]
    }
] 

我希望数据显示如下：

但结果总是这样：

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

雇员
日期
超时
{{da.name}
{{s.date}}

你能帮助我如何在表格中正确显示我的数据吗。 我用的是angular 2

怎么样

<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 da of data; ">
                 <td>
                     <strong>{{da.name}}</strong>
                  </td>
                  <td colspan="2">
                    <tr *ngFor= "let d of da.details; ">
                     <td>{{d.date | date}}</td>
                     <td>
                    <input type="time" [value]="d.start_time"/>
                    <strong>/</strong>
                    <input type="time" [value]="d.end_time"/>
                    </td>
                    </tr>
                  </td>

            </tr>
      </tbody>
</table>

雇员
日期
超时
{{da.name}
{{d.date | date}}
/

试试这个

在组件中使用

parseDate

自定义函数

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

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

{{parseDate(s.date) | date: 'MMM dd, yyyy'}}

<强>注释：< /强>也考虑<代码> @ Saurabh Agrawal <代码>对表格格式的回答。

结果:

试着这样做：

这里是演示链接：

雇员
日期
超时
{{d.name}
{{c.date}

以下是按行和列排列数据的代码，以及按所需格式显示日期的代码

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

{{da.name}
{{s.date}日期：'MMM dd，yyyy'}
/

您的

详细信息。日期是一个字符串。您必须将其转换为日期对象，或者使用接受日期字符串并以特定格式返回的筛选器。关于冗余名称，您正在
employee.details的循环中创建元素。相反，在employee循环中创建它，并在该循环中使用另一个循环为详细信息创建行。不需要，即使它是字符串，它仍然可以工作。您需要修改json响应。它是多维数组而不是json。您担心第一列中的日期格式或数据吗？这不是我想要的，请你再读一遍我的问题好吗？{dates | date:“MMM dd，yyyy”}等一下，我用管道转换日期{{dates | date:}和我用管道一样。您只需将字符串转换为日期。因此，我使用
parseDate（）
函数来转换为日期。请看，您只能格式化日期，不能格式化字符串@MariaJen和查看演示，您可以看到完整的详细信息。结果与您在问题中预期的结果相同。不清楚。你看到我的截图了吗？结果是相同的格式@马里亚金
<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>

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