如何在Angular6中生成表？

Question

public class TimeSheet
    {
        public int Id { get; set; }        
        public int EmployeeID { get; set; }  
        public int TaskID { get; set; }
        public WeekDays DayOfWeek { get; set; }
        public int Hours { get; set; }
    }
	
	public class Days
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Hours { get; set; }
    }

    public class DailyTask: Task
    {
        public List<Days> HoursPerDay { get; set; }
    }

我在将数据与表的行和列绑定时遇到问题，可以说我们构建了一个简单的时间表应用程序，其中每天都有每个任务日志的任务和工作时间。例如

任务1->在星期一和星期二记录2个小时
Task2->在星期五记录5个小时

我编写了一些代码，但无法将列与任务绑定，我有一个表。我将如何在Angular6中实现呢？

对于json数据，请检查附件图片

<table class="table" *ngIf="timeSheet.length > 0">
    <tr>
        <th>Tasks     
    </th>
    <th *ngFor="let day of weekDays">
        <span>{{ day.name }}</span>
    </th>
    </tr>
    <tr *ngFor="let time of timeSheet;let t = index;">
        <td> {{t.dailyTask |json }}
            <select (change)="selectTask($event.target.value)" >
                <option *ngFor="let task of time.tasks; let x=index" value={{task.id}}>
                    {{task.name}}
                </option>
            </select>
        </td>
        <td *ngFor="let day of time.days;let i = index;">
        <span> {{ day.hours }}
              </span>
                <input type="number" [(ngModel)] = "time.days[t].hours">            
        </td>       
    </tr>    
</table>

Answer 1

您需要从服务器端创建每周的每天数据阵列。将0作为默认值设置为小时。如果数组根据您的要求无效，您将得到意外的输出。

请看一下这个演示URL

例如

    [{
      "employeeID": 1,
      "taskID":2,
      "hoursPerDay":[{
            "id":6,
            "name":"Monday",
            "hours":5
        },{
            "id":7,
            "name":"Tuesday",
            "hours":4
        },{
            "id":0,
            "name":"Wednesday",
            "hours":0
        },{
            "id":0,
            "name":"Thursday",
            "hours":0
        },{
            "id":0,
            "name":"Friday",
            "hours":0
        },{
            "id":0,
            "name":"Saturday",
            "hours":0
        },{
            "id":0,
            "name":"Sunday",
            "hours":0
        }]
    },
    ...
]