Question

有人可以告诉我如何在HTML表的列中显示星期一，星期二...。我想以表格格式显示整个对象，并在HTML页面中显示它。该怎么办？

this.dietplan={
                        "week1": {
                          "Monday": [
                            {
                              "time": "10:00 AM",
                              "diet": "3 eggs",
                              "calories": "150"
                            },
                            {
                              "time": "12:00 PM",
                              "diet": "2 eggs",
                              "calories": "100"
                            }
                          ],
                          "Tuesday": [
                            {
                              "time": "10:00 AM",
                              "diet": "3 eggs",
                              "calories": "150"
                            },
                            {
                              "time": "12:00 PM",
                              "diet": "2 eggs",
                              "calories": "100"
                            }
                          ]
                        }
                      }

Answer 1

尝试如下操作-请参见https://stackblitz.com/edit/angular-week-table

html

<table class="table table-hover" [id]="mytable"> 
  <tbody> 
    <ng-container *ngFor="let diet of dietplan | keyvalue"> 
      <tr *ngFor="let day of diet.value | keyvalue | sortWeekday">
        <td>{{day.key}}</td> 
        <ng-container *ngFor="let row of day.value"> 
          <td>{{row.time || string}}<br> {{row.diet || string}}<br> {{row.calories || string}}<br></td>
        </ng-container> 
      </ng-container>
    </tbody>
  </table>

ts

  dietplan={"week1": {
              "Monday": [
                {
                  "time": "10:00 AM",
                  "diet": "3 eggs",
                  "calories": "150"
                },
                {
                  "time": "12:00 PM",
                  "diet": "2 eggs",
                  "calories": "100"
                }
              ],
              "Tuesday": [
                {
                  "time": "10:00 AM",
                  "diet": "3 eggs",
                  "calories": "150"
                },
                {
                  "time": "12:00 PM",
                  "diet": "2 eggs",
                  "calories": "100"
                }
              ]
            }
          };

烟斗气

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

@Pipe({name: 'sortWeekday'})
export class SortWeekdayPipe implements PipeTransform {
  transform(weekdays: any[]): any[] {
    weekdays.sort((a, b) => {
      let sortedWeekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Staurday', 'Sunday'];

      return sortedWeekdays.indexOf(a.key) - sortedWeekdays.indexOf(b.key);
    });
    return weekdays;
  }
}

Answer 2

您可以看到下面的代码以从json生成表

var _table_ = document.createElement('table'),
    _tr_ = document.createElement('tr'),
    _th_ = document.createElement('th'),
    _td_ = document.createElement('td');

// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable(arr) {
     var table = _table_.cloneNode(false),
         columns = addAllColumnHeaders(arr, table);
     for (var i=0, maxi=arr.length; i < maxi; ++i) {
         var tr = _tr_.cloneNode(false);
         for (var j=0, maxj=columns.length; j < maxj ; ++j) {
             var td = _td_.cloneNode(false);
                 cellValue = arr[i][columns[j]];
             td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
             tr.appendChild(td);
         }
         table.appendChild(tr);
     }
     return table;
 }

 // Adds a header row to the table and returns the set of columns.
 // Need to do union of keys from all records as some records may not contain
 // all records
 function addAllColumnHeaders(arr, table)
 {
     var columnSet = [],
         tr = _tr_.cloneNode(false);
     for (var i=0, l=arr.length; i < l; i++) {
         for (var key in arr[i]) {
             if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key)===-1) {
                 columnSet.push(key);
                 var th = _th_.cloneNode(false);
                 th.appendChild(document.createTextNode(key));
                 tr.appendChild(th);
             }
         }
     }
     table.appendChild(tr);
     return columnSet;
 }
var source={
                          "Monday": [
                            {
                              "time": "10:00 AM",
                              "diet": "3 eggs",
                              "calories": "150"
                            },
                            {
                              "time": "12:00 PM",
                              "diet": "2 eggs",
                              "calories": "100"
                            }
                          ],
                          "Tuesday": [
                            {
                              "time": "10:00 AM",
                              "diet": "3 eggs",
                              "calories": "150"
                            },
                            {
                              "time": "12:00 PM",
                              "diet": "2 eggs",
                              "calories": "100"
                            }
                          ]
                        }

document.body.appendChild(buildHtmlTable(source["Monday"]));

请参阅工作示例here

如何在HTML表中显示键值？

2 个答案: