How to generate a table in Angular6?How to remove a created library in angular6Angular6 issue for ngx-daterangepickerhow to do pagination in angular6Angular6 datepicker ng changeHow to iterate the keys and values in Angular6Table rowspan with ngFor Angular6Slider Problem with angular6 and bootstrap3Why setInterval() is not working in angular6?How to add tooltip in angular6
how to add 1 milliseconds on a datetime string?
Can I pay with HKD in Macau or Shenzhen?
Very basic singly linked list
Character Frequency in a String
What would be the side effects on the life of a person becoming indestructible?
Grid/table with lots of buttons
What is "ass door"?
How do I run a game when my PCs have different approaches to combat?
Should I describe a character deeply before killing it?
Why did modems have speakers?
Is it normal practice to screen share with a client?
Why is a dedicated QA team member necessary?
Examples of solving for unknowns using equivalence relations that are not equality, inequality, or boolean truth?
Historicity doubted by Romans
How can I prevent corporations from growing their own workforce?
Would it be a good idea to memorize relative interval positions on guitar?
How to handle aversion that derives from perceiving arrogance?
Where to place an artificial gland in the human body?
Moving files accidentally to an not existing directory erases files?
Invert Some Switches on a Switchboard
Why is the return type for ftell not fpos_t?
Short story about a group of sci-fi writers sitting around discussing their profession
Does a grappled creature need to use an action to escape grapple if grappler is stunned?
What are the exact meanings of roll, pitch and yaw?
How to generate a table in Angular6?
How to remove a created library in angular6Angular6 issue for ngx-daterangepickerhow to do pagination in angular6Angular6 datepicker ng changeHow to iterate the keys and values in Angular6Table rowspan with ngFor Angular6Slider Problem with angular6 and bootstrap3Why setInterval() is not working in angular6?How to add tooltip in angular6
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
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;
I have a problem in binding data with table rows and columns, lets say we build a simple timesheet application in which we have Task and working hours for every task log in daily basis. For example
Task1 -> Log 2 hours on Monday and Tuesday
Task2 -> Log 5 hours on Friday
I have made some code but unable to bind columns with task, I have a table. How would I implement this in Angular6?
For json data please check attached image
<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> 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>angular6
edited Apr 2 at 18:49
halfer
15.2k7 gold badges61 silver badges126 bronze badges
asked Mar 26 at 15:46
Zeeshan YounisZeeshan Younis
11 bronze badge
add a comment |
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;
I have a problem in binding data with table rows and columns, lets say we build a simple timesheet application in which we have Task and working hours for every task log in daily basis. For example
Task1 -> Log 2 hours on Monday and Tuesday
Task2 -> Log 5 hours on Friday
I have made some code but unable to bind columns with task, I have a table. How would I implement this in Angular6?
For json data please check attached image
<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> 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>angular6
edited Apr 2 at 18:49
halfer
15.2k7 gold badges61 silver badges126 bronze badges
asked Mar 26 at 15:46
Zeeshan YounisZeeshan Younis
11 bronze badge
What is the actual problem? table not generating or anything else? because your demo link shows something else.
– Hardik
Mar 27 at 4:45
Actually when i bind array with rows data is not binding properly with columns of a row. For example Task 1 have logged 2 hours on Monday and 5 hours on Thursday. Now problem is all row binding same data for every columns like 2 hours and 5 hours repeated with every columns of a row
– Zeeshan Younis
Mar 27 at 5:40
Can you please use stackblitz.com for demo link so I can help you more on this.
– Hardik
Mar 27 at 5:47
@Hardik here is the demo linke stackblitz.com/edit/…
– Zeeshan Younis
Mar 30 at 17:23
if hoursPerDay is empty then show row with 0 but as you can see inside json i have hoursPerday with day wise data, but data is not showing with their respective day, it is showing on 1st columns always
– Zeeshan Younis
Mar 30 at 17:25
add a comment |
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;
I have a problem in binding data with table rows and columns, lets say we build a simple timesheet application in which we have Task and working hours for every task log in daily basis. For example
Task1 -> Log 2 hours on Monday and Tuesday
Task2 -> Log 5 hours on Friday
I have made some code but unable to bind columns with task, I have a table. How would I implement this in Angular6?
For json data please check attached image
<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> 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>angular6
edited Apr 2 at 18:49
halfer
15.2k7 gold badges61 silver badges126 bronze badges
asked Mar 26 at 15:46
Zeeshan YounisZeeshan Younis
11 bronze badge
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;
I have a problem in binding data with table rows and columns, lets say we build a simple timesheet application in which we have Task and working hours for every task log in daily basis. For example
Task1 -> Log 2 hours on Monday and Tuesday
Task2 -> Log 5 hours on Friday
I have made some code but unable to bind columns with task, I have a table. How would I implement this in Angular6?
For json data please check attached image
<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> 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>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;
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;
<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> 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><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> 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>angular6
angular6
edited Apr 2 at 18:49
halfer
15.2k7 gold badges61 silver badges126 bronze badges
asked Mar 26 at 15:46
Zeeshan YounisZeeshan Younis
11 bronze badge
edited Apr 2 at 18:49
halfer
15.2k7 gold badges61 silver badges126 bronze badges
asked Mar 26 at 15:46
Zeeshan YounisZeeshan Younis
11 bronze badge
edited Apr 2 at 18:49
halfer
15.2k7 gold badges61 silver badges126 bronze badges
edited Apr 2 at 18:49
halfer
15.2k7 gold badges61 silver badges126 bronze badges
edited Apr 2 at 18:49
halfer
15.2k7 gold badges61 silver badges126 bronze badges
15.2k7 gold badges61 silver badges126 bronze badges
asked Mar 26 at 15:46
Zeeshan YounisZeeshan Younis
11 bronze badge
asked Mar 26 at 15:46
Zeeshan YounisZeeshan Younis
11 bronze badge
asked Mar 26 at 15:46
Zeeshan YounisZeeshan Younis
11 bronze badge
11 bronze badge
What is the actual problem? table not generating or anything else? because your demo link shows something else.
– Hardik
Mar 27 at 4:45
Actually when i bind array with rows data is not binding properly with columns of a row. For example Task 1 have logged 2 hours on Monday and 5 hours on Thursday. Now problem is all row binding same data for every columns like 2 hours and 5 hours repeated with every columns of a row
– Zeeshan Younis
Mar 27 at 5:40
Can you please use stackblitz.com for demo link so I can help you more on this.
– Hardik
Mar 27 at 5:47
@Hardik here is the demo linke stackblitz.com/edit/…
– Zeeshan Younis
Mar 30 at 17:23
if hoursPerDay is empty then show row with 0 but as you can see inside json i have hoursPerday with day wise data, but data is not showing with their respective day, it is showing on 1st columns always
– Zeeshan Younis
Mar 30 at 17:25
add a comment |
What is the actual problem? table not generating or anything else? because your demo link shows something else.
– Hardik
Mar 27 at 4:45
Actually when i bind array with rows data is not binding properly with columns of a row. For example Task 1 have logged 2 hours on Monday and 5 hours on Thursday. Now problem is all row binding same data for every columns like 2 hours and 5 hours repeated with every columns of a row
– Zeeshan Younis
Mar 27 at 5:40
Can you please use stackblitz.com for demo link so I can help you more on this.
– Hardik
Mar 27 at 5:47
@Hardik here is the demo linke stackblitz.com/edit/…
– Zeeshan Younis
Mar 30 at 17:23
if hoursPerDay is empty then show row with 0 but as you can see inside json i have hoursPerday with day wise data, but data is not showing with their respective day, it is showing on 1st columns always
– Zeeshan Younis
Mar 30 at 17:25
What is the actual problem? table not generating or anything else? because your demo link shows something else.
– Hardik
Mar 27 at 4:45
What is the actual problem? table not generating or anything else? because your demo link shows something else.
– Hardik
Mar 27 at 4:45
Actually when i bind array with rows data is not binding properly with columns of a row. For example Task 1 have logged 2 hours on Monday and 5 hours on Thursday. Now problem is all row binding same data for every columns like 2 hours and 5 hours repeated with every columns of a row
– Zeeshan Younis
Mar 27 at 5:40
Actually when i bind array with rows data is not binding properly with columns of a row. For example Task 1 have logged 2 hours on Monday and 5 hours on Thursday. Now problem is all row binding same data for every columns like 2 hours and 5 hours repeated with every columns of a row
– Zeeshan Younis
Mar 27 at 5:40
Can you please use stackblitz.com for demo link so I can help you more on this.
– Hardik
Mar 27 at 5:47
Can you please use stackblitz.com for demo link so I can help you more on this.
– Hardik
Mar 27 at 5:47
@Hardik here is the demo linke stackblitz.com/edit/…
– Zeeshan Younis
Mar 30 at 17:23
@Hardik here is the demo linke stackblitz.com/edit/…
– Zeeshan Younis
Mar 30 at 17:23
if hoursPerDay is empty then show row with 0 but as you can see inside json i have hoursPerday with day wise data, but data is not showing with their respective day, it is showing on 1st columns always
– Zeeshan Younis
Mar 30 at 17:25
if hoursPerDay is empty then show row with 0 but as you can see inside json i have hoursPerday with day wise data, but data is not showing with their respective day, it is showing on 1st columns always
– Zeeshan Younis
Mar 30 at 17:25
add a comment |
1 Answer
1
active
oldest
votes
You need to create every day of week data array from server side. set 0 as a default value to hours. You'll get unexpected output if array is not valid as per the your requirement.
Please have a look on this demo URL
eg.
[
"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
]
,
...
]
answered Apr 1 at 6:01
HardikHardik
1,78214 silver badges24 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55361212%2fhow-to-generate-a-table-in-angular6%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to create every day of week data array from server side. set 0 as a default value to hours. You'll get unexpected output if array is not valid as per the your requirement.
Please have a look on this demo URL
eg.
[
"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
]
,
...
]
answered Apr 1 at 6:01
HardikHardik
1,78214 silver badges24 bronze badges
add a comment |
You need to create every day of week data array from server side. set 0 as a default value to hours. You'll get unexpected output if array is not valid as per the your requirement.
Please have a look on this demo URL
eg.
[
"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
]
,
...
]
answered Apr 1 at 6:01
HardikHardik
1,78214 silver badges24 bronze badges
add a comment |
You need to create every day of week data array from server side. set 0 as a default value to hours. You'll get unexpected output if array is not valid as per the your requirement.
Please have a look on this demo URL
eg.
[
"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
]
,
...
]
answered Apr 1 at 6:01
HardikHardik
1,78214 silver badges24 bronze badges
You need to create every day of week data array from server side. set 0 as a default value to hours. You'll get unexpected output if array is not valid as per the your requirement.
Please have a look on this demo URL
eg.
[
"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
]
,
...
]
answered Apr 1 at 6:01
HardikHardik
1,78214 silver badges24 bronze badges
answered Apr 1 at 6:01
HardikHardik
1,78214 silver badges24 bronze badges
answered Apr 1 at 6:01
HardikHardik
1,78214 silver badges24 bronze badges
answered Apr 1 at 6:01
HardikHardik
1,78214 silver badges24 bronze badges
1,78214 silver badges24 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55361212%2fhow-to-generate-a-table-in-angular6%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is the actual problem? table not generating or anything else? because your demo link shows something else.
– Hardik
Mar 27 at 4:45
Actually when i bind array with rows data is not binding properly with columns of a row. For example Task 1 have logged 2 hours on Monday and 5 hours on Thursday. Now problem is all row binding same data for every columns like 2 hours and 5 hours repeated with every columns of a row
– Zeeshan Younis
Mar 27 at 5:40
Can you please use stackblitz.com for demo link so I can help you more on this.
– Hardik
Mar 27 at 5:47
@Hardik here is the demo linke stackblitz.com/edit/…
– Zeeshan Younis
Mar 30 at 17:23
if hoursPerDay is empty then show row with 0 but as you can see inside json i have hoursPerday with day wise data, but data is not showing with their respective day, it is showing on 1st columns always
– Zeeshan Younis
Mar 30 at 17:25