#html #angular #typescript
#HTML #angular #typescript
Вопрос:
У меня есть одна маленькая метка, где я показываю общее количество результатов для данных одной таблицы. ниже я использую одну таблицу, в которой я показываю список данных.когда я удаляю одну строку в таблице, таблица обновляется, но в этой метке количество результатов не обновляется.Вот мои данные..
import { VsnApplicationsServiceProxy, VsnApplicationDto , CreateOrEditVsnApplicationDto } from '@shared/service-proxies/service-proxies';
@Component({
selector: 'vsn-applicationmappings',
templateUrl: './applicationmappings.component.html',
styleUrls: ['./applicationmappings.component.less'],
encapsulation: ViewEncapsulation.None,
animations: [appModuleAnimation()]
})
export class ApplicationMappingsComponent extends AppComponentBase implements OnInit {
applications: any;
constructor(
injector: Injector,
private _vsnApplicationsServiceProxy: VsnApplicationsServiceProxy,
private _activatedRoute: ActivatedRoute,
) {
super(injector);
}
ngOnInit() {
this._vsnApplicationsServiceProxy.getAll("", "", "", "", "", "", "", 0, 100).subscribe((Applications: any) => {
this.applications = Applications.totalCount;
console.log(' application value', Applications.totalCount);
});
}
getVsnApplications(event?: LazyLoadEvent) {
if (this.primengTableHelper.shouldResetPaging(event)) {
this.paginator.changePage(0);
return;
}
this.primengTableHelper.showLoadingIndicator();
this._vsnApplicationsServiceProxy.getAll(
this.filterText,
this.nameFilter,
this.businessNameFilter,
this.vsnApplicationTypeNameFilter,
this.vsnApplicationCategoryNameFilter,
this.vsnApplicationSubCategoryNameFilter,
this.primengTableHelper.getSorting(this.dataTable),
this.primengTableHelper.getSkipCount(this.paginator, event),
this.primengTableHelper.getMaxResultCount(this.paginator, event)
).subscribe(result => {
this.primengTableHelper.totalRecordsCount = result.totalCount;
this.primengTableHelper.records = result.items;
this.primengTableHelper.hideLoadingIndicator();
});
}
reloadPage(): void {
this.paginator.changePage(this.paginator.getPage());
}
createVsnApplication(): void {
this.createOrEditVsnApplicationModal.show();
}
deleteVsnApplication(vsnApplication: VsnApplicationDto): void {
this.message.confirm(
'',
(isConfirmed) => {
if (isConfirmed) {
this._vsnApplicationsServiceProxy.delete(vsnApplication.id)
.subscribe(() => {
this.reloadPage();
this.notify.success(this.l('SuccessfullyDeleted'));
});
}
}
);
} <div class="col-sm-2">
<div class="box">
<div><br><br>
<h4>{{applications}}</h4>
</div>
<div> <span>
<h6>Applications</h6>
</span></div>
</div>
</div>
<div class="m-content">
<div class="m-portlet m-portlet--mobile">
<div class="m-portlet__body">
<div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
<p-table #dataTable (onLazyLoad)="getVsnApplications($event)" [value]="primengTableHelper.records"
rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
[scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
[resizableColumns]="primengTableHelper.resizableColumns">
<ng-template pTemplate="header">
<tr>
<th style="width: 150px" pSortableColumn="vsnApplicationType.name">
{{l("ApplicationName")}}
<p-sortIcon field="vsnApplication.name"></p-sortIcon>
</th>
<th style="width: 130px"
[hidden]="!isGrantedAny('Pages.Administration.VsnApplicationTypes.Edit', 'Pages.Administration.VsnApplicationTypes.Delete')">
{{l('Actions')}}</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-record="$implicit">
<tr>
<td style="width:150px">
<span class="ui-column-title"> {{l("ApplicationName")}}</span>
{{record.vsnApplication.businessName}}
</td>
<td style="width: 130px"
[hidden]="!isGrantedAny('Pages.Administration.VsnApplications.Edit', 'Pages.Administration.VsnApplications.Delete')">
<div class="btn-group dropdown" dropdown container="body">
<button class="dropdown-toggle btn btn-sm btn-primary" dropdownToggle>
<i class="fa fa-cog"></i><span class="caret"></span> {{l("Actions")}}
</button>
<ul class="dropdown-menu" *dropdownMenu>
<li>
<a href="javascript:;"
(click)="viewVsnApplicationModal.show(record)">{{l('View')}}</a>
</li>
<li>
<a href="javascript:;"
*ngIf="permission.isGranted('Pages.Administration.VsnApplicationTypes.Edit')"
(click)="createOrEditVsnApplicationModal.show(record.vsnApplication.id)">{{l('Edit')}}</a>
</li>
<li>
<a href="javascript:;"
*ngIf="permission.isGranted('Pages.Administration.VsnApplicationTypes.Delete')"
(click)="deleteVsnApplication(record.vsnApplication)">{{l('Delete')}}</a>
</li>
</ul>
</div>
</td>
</tr>
</ng-template>
</p-table>
<div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
{{l('NoData')}}
</div>
<div class="primeng-paging-container">
<p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}" #paginator
(onPageChange)="getVsnApplications($event)"
[totalRecords]="primengTableHelper.totalRecordsCount"
[rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
</p-paginator>
<span class="total-records-count">
{{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
</span>
</div>
</div>
</div>
</div>
<createOrEditVsnApplicationModal #createOrEditVsnApplicationModal (modalSave)="getVsnApplications()">
</createOrEditVsnApplicationModal>
<viewVsnApplicationModal #viewVsnApplicationModal></viewVsnApplicationModal>
</div> При удалении одной строки таблица обновляется и показывает обновленные записи. но в этой табличке количество результатов не обновляется.Я искал в stack overflow, я обнаружил, что мы должны указать like splice (id, 1)
но это не работает, любые предложения были бы очень полезны..
Комментарии:
1. Вы хотите обновить
this.primengTableHelper.recordsэто количество?2. Нет, сэр, в методе ngOnInit () я объявил переменную с именем this.applications, где я получаю общее количество с помощью vsnApplicationServiceProxy.GetAll(). Я хочу обновить только эту переменную.
3. можете ли вы создать stackblitz.com/edit/angular-w6dxqp