使用angular

时间:2019-04-01 06:32:01

标签: 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>

当删除一行时,该表正在刷新并显示更新的记录。但是在结果计数标签中却没有刷新。我在堆栈溢出中进行搜索,发现我们必须像splice(id,1) 但这不起作用,任何建议都会有很大帮助。

0 个答案:

没有答案