#angular #html-table #ngfor #httpservice
#angular #html-таблица #ngfor #httpservice
Вопрос:
Я использую *ngFor для перебора массива объектов в таблице данных и для серийного номера. я использую let index of i
, а затем печатаю ее в таблице, но проблема, с которой я сталкиваюсь, заключается в том, что после 9-го серийного номера. я получил 10, но после 1 серийного номера. как 1, 10, 11, 2, 3. Кто-нибудь может мне помочь с этим? Вот мой машинописный код и HTML-код.
// GETTING BONUS DATA
getAllJobposts() {
this.apiService.hrService.getAllJobPost().subscribe((res: any) => {
this.jobPostsData = res.data;
console.log(this.jobPostsData);
// this.DataTablesFunctionCallAfterDataInit()
});
}
<tr class="MousePointer" (click)="EditRecord(post.id, target)" *ngFor="let
post of jobPostsData | reverse; let i = index">
<td>{{ i 1 }}</td>
<td>
<span style="display: inline">
<a class=" btn btn-link btn-sm " title="Delete" [id]="post.id" (click)="$event.stopPropagation();modal.ShowModal(post.id)">
<i [ngStyle]="{color: 'blue'}" class="fa fa-trash-o ">
</i>
</a>
<a class="btn btn-link btn-sm btn-round" title="Edit" (click)="$event.stopPropagation();EditRecord(post.id,target)">
<i [ngStyle]="{color: 'blue'}" class="fa fa-pencil-square-o "></i>
</a>
</span>
</td>
<td>{{ post.jobTitle }}</td>
<td>{{ getDepartmentName(post.departmentId) }}</td>
<td>{{ getDesignationName(post.designationId) }}</td>
<td>{{ post.totalPosition }}</td>
<td>{{ post.minExperience }}</td>
<td>{{ getCityName(post.cityId) }}</td>
<td>
<span [class]="post.active == 1? 'status success':'status danger'" style="width:60px !important; text-align: center;">
{{post.active == 1? "Active":"In-Active" }}
</span>
</td>
</tr>
Комментарии:
1. Пожалуйста, опубликуйте stackblitz
2. Покажите свой
reverse
канал.3. Ну, я попробовал без обратного канала. но результат тот же
4. @AbdulBasit проект действительно большой, поэтому я не могу опубликовать его в stackblitz…
5. Похоже, что ваш столбец сортируется как строка, а не как число. Трудно точно сказать, в чем проблема, не видя остальной части вашего кода. Какой элемент таблицы вы используете?
Ответ №1:
Кажется, вам нужно переписать свой reverse
канал чем-то вроде этого:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
transform(value) {
return value.sort((a, b) => {
return (b.id - a.id);
});
}
}
В функции сортировки вам необходимо указать объект, поданный для сортировки:
return (b.id - a.id)
.
Или используйте parseInt(b.id) - parseInt(a.id)
, если идентификаторы являются строками (в противном случае будет выдан тот же результат, что и на вашем скриншоте, т.е. в алфавитном порядке)
Дополнительно вы можете передать поле объекта для сортировки через параметры канала