Double *ngFor in a table - Angular 2 - javascript

I need to create a table based in two loops. I have tried the following:
<tbody *ngIf="testCases">
<tr class="pointer" *ngFor="let car of cars; let bike of bikes">
<td class="center">{{car?.id}}</td>
<td class="center">{{bike?.id}}</td>
</tr>
</tbody>
I know the I get the data because I have tried it in typescript with console.log but when I display it in HTML I print null for bike


You can use <ng-container>. It is a helper element that allows to use *ngFor, *ngIf, or other structural directives but doesn't actually create HTML content.
<ng-container *ngFor="let car of cars">
<tr class="pointer" *ngFor="let bike of bikes">
<td>{{car.id}} {{bike.id}}</td>
</tr>
</ng-container>


If both have same no of records , you can do it like
<tr class="pointer" *ngFor="let car of cars; let i = index;">
<td class="center">{{cars[i]?.id}}</td> // or <td class="center">{{car?.id}}</td>
<td class="center">{{bikes[i]?.id}}</td>
</tr>


In your typescript code you can do this:
vehicles = (<any[]>cars).concat(<any>[bikes]);
And then in your view you can bind it easily like:
<tr class="pointer" *ngFor="let vehicle of vehicles">
<td *ngIf="vehicle.vehicleType === 'car'" class="center">{{vehicle.id}} is car</td>
<td *ngIf="vehicle.vehicleType === 'bike'" class="center">{{vehicle.id}} is bike</td>
</tr>


You cannot use on the same line, try it as separate rows
<tbody *ngIf="testCases">
<tr class="pointer" *ngFor="let car of cars ">
<td class="center">{{car?.id}}</td>
</tr>
<tr class="pointer" *ngFor="let bike of bikes">
<td class="center">{{bike?.id}}</td>
</tr>
</tbody>
EDIT
if you want on the same row use index which will hold the array value
<tr class="pointer" *ngFor="let car of cars; let x = index;">
<td class="center">{{cars[x]?.id}}</td>
<td class="center">{{bikes[x]?.id}}</td>
</tr>

Related

html table returns NaN data

My html table shows NaN value because of field name has a symbol(/) in between.
below is my code
<tr ng-repeat="user in msg.options | orderBy:sortType:sortReverse | filter:search track by $index"
ng-click="msg.payload = user.send(msg);" style="width:100%" flex>
<td ng-bind="$index+1"></td>
<td ng-bind="user.PalletID"></td>
<td ng-bind="user.Description"></td>
<td ng-bind="user.Location"></td>
<td ng-bind="user.Empty/NonEmpty"></td>
<td style="text-align:center" ng-click="msg.payload = user.send(msg);" >
<img src="http://192.168.137.1:1880/ui/Images/unload32.png" width="30" height="30">
</td>
</tr>
Please help to resolve this issue.

rowspan for 3 columns using angularJS

I have a category list that contains name and subject list.
The subject list contains name and course list.
The course list contain name.
I want to display this data in table that will rowspan category or subject if they are the same. For example:
Category Subject Course
cat1 sub1 ''
sub2 cour1
cour2
sub3 ''
cat3 ''
Currently I have it working for two columns using this:
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td>{{ subject.name }}</td>
</tr>
</tbody>
</table>
However, I am having trouble doing it for 3 columns. This is the code I have that is not working. The course name are not being displayed and subject name become listed in column order instead of row order. Any suggestion:
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
<th width="40%">Course</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td rowspan="{{subject.courseList.length+1}}">{{ subject.name }}</td>
<tr ng-repeat="course in subject.courseList">
<td>{{ course.name }}</td>
</tr>
</tr>
</tbody>
</table>
Sample Data:
[
{"id":95,"categoryName":"A new catagory",
"subjectList":[{"id":112,"subjectname":"2ndnewcat","curcount":0,
"courseList":"[{\"name\":\"-\",\"curcount\":0}]"},
{"id":76,"subjectname":"ZZZZZZZZZZZZZZZZZZ_class","curcount":0,
"courseList":[{"coursename":"thiswillbenew111111111112","curcount":1}]}]},
{"id":93,"categoryName":"David Test",
"subjectList":[{"id":75,"subjectname":"This is a test","curcount":1,
"courseList":[{"coursename":"newewst1","curcount":0}]}]},
{"id":116,"categoryName":"New Category",
"subjectList":[{"id":79,"subjectname":"New Subject","curcount":2,
"courseList":[{"coursename":"ISO training part 2","curcount":0}]}]},
{"id":0,"categoryName":"cat1",
"subjectList":[{"id":15,"subjectname":"test","curcount":4,
"courseList":"[{\"name\":\"-\",\"curcount\":0}]"}]},
{"id":11,"categoryName":"cat2",
"subjectList":[{"id":68,"subjectname":"asdasd","curcount":5,
"courseList":[{"coursename":"david1","curcount":0},{"coursename":"thisisatest","curcount":0}]}]},
{"id":12,"categoryName":"cate3",
"subjectList":[{"id":12,"subjectname":"newest1","curcount":6,
"courseList":[{"coursename":"cous1","curcount":0}]}]},
{"id":163,"categoryName":"emptylist",
"subjectList":"[{\"name\":\"-\",\"curcount\":0}]"}
]
This is current code I am testing. It will will rowspan the category, display each subject once and then display all the courses for each subject in list in a single cell. I would prefer to rowspan subject too, but this is what I got working so far.
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
<th width="40%">Course</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td>{{ subject.subjectname }}</td>
<td> <li ng-repeat="course in subject.courseList" >{{ course.coursename }} </li></td>
</tr>
<td ng-if="category.subjectList.length==27"> </td>
<td ng-if="category.subjectList.length==27"> </td>
</tbody>
</table>
Thanks,
AB

The two column case should be:
<tbody ng-repeat="dept in org.deptList">
<tr ng-repeat="subj in dept.subjList">
<td rowspan="dept.subjList.length+1">
{{dept.name}}
</td>
<td>
{{subj.name}}
</td>
</tr>
</tbody>
For the three column case, nest a <table> in the <td> element:
<tbody ng-repeat="dept in org.deptList">
<tr ng-repeat="subj in dept.subjList">
<td rowspan="dept.subjList.length+1">
{{dept.name}}
</td>
<td>
<table>
<tr ng-repeat="class in subj.classList">
<td rowspan="subj.classList.length+1">
{{subj.name}}
</td>
<td>
{{class.name}}
</td>
</tr>
</table>
</td>
</tr>
</tbody>

Angular2 Looping through dynamic columns

I'm building a dynamic table using angular2 using *ngFor as below, but I'm not able to see data. I'm not sure {{x[col]}} is correct, any idea?
<tr *ngFor="let x of exportList">
<td *ngFor="let col of cols">
{{x[col]}}
</td>
</tr>

You need to traverse each row in the inner loop.
Try:
<tr *ngFor="let rows of exportList">
<td *ngFor="let col of rows">
{{col}}
</td>
</tr>

<tr *ngFor="let x of exportList">
<td *ngFor="let col of x">
{{col}}
</td>
</tr>
you simply need to replace cols with x. exportList contains numbers of object.so in x you will get one object in each loop.By using object,you can fetch each field.

data-ng-repeat for i from 0 to array length

I have an array called "design", with dynamic length. I want to show all the elements of this array in more cells of a table. I write this code:
<tr style="cursor:pointer" data-ng-repeat="i in [0,1,2,3,4,5]">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ design[$index] }}</td>
</tr>
but I want to repeat data for i in [0, . . . , design.length], not to 5. Length of design is not 5, but it change dynamically

You should be able to do (if no duplicates in design):
<tr style="cursor:pointer" ng-repeat="obj in design">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ obj }}</td>
</tr>
Or (if duplicates in design):
<tr style="cursor:pointer" ng-repeat="obj in design track by $index">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ obj }}</td>
</tr>

Solved in this way:
<tr style="cursor:pointer" ng-repeat="i in getNumber(design.length) track by $index">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ design[$index] }}</td>
</tr>
And in my js file:
$scope.getNumber = function(num) {
return new Array(num);
}

Best practice for Angular ng-repeat with nested data

I have the following code that I admit looks pretty gross. Anyone have a suggest for cleaning it up and making it a bit more scalable without using nested tables?
<tr data-ng-repeat="data in displayData">
<td data-ng-show="data.name">
{{data.name}}
</td>
<td data-ng-show="data.cols[0]" data-ng-repeat="value in data.cols[0]">
{{value}}
</td>
<td data-ng-show="data.cols[1]" data-ng-repeat="value in data.cols[1]">
{{value}}
</td>
<td data-ng-show="data.cols[2]" data-ng-repeat="value in data.cols[2]">
{{value}}
</td>
<td data-ng-show="data.cols[3]" data-ng-repeat="value in data.cols[4]">
{{value}}
</td>
<td data-ng-show="data.cols[4]" data-ng-repeat="value in data.cols[3]">
{{value}}
</td>
</tr>

I think this is what you're trying to achieve, but I'm not entirely sure by looking at your code.
<tr data-ng-repeat="data in displayData">
<td data-ng-show="data.name">
{{data.name}}
</td>
<td data-ng-show="column" data-ng-repeat="column in data.cols">
{{ column.value }}
</td>
</tr>

What I did was actually flatten data.cols to one array in the controller. Something like this:
var merged = [].concat.apply([], row.cols);
row.cols = merged;
$scope.displayData.push(row);

Categories

Resources