角度桌垫排序箭头在首次加载时不显示

Question

为什么当我在 ngOnit 中分配或放置 sortParams 和 sortDirs 时，排序箭头显示并工作，但当我将其放置或分配在 getUserData() 内时，它不起作用？是因为异步吗？谢谢，将不胜感激。

问题是 mat 排序标题箭头未显示，然后我在 getUserData 内分配排序，但当我在 ngOnit 中执行排序时它会起作用。但我需要在 getUserData 中分配。

   this.requestsListTable.sortParams = ['requestTitle']
        this.requestsListTable.sortDirs = ['asc'];

#ts 代码

  ngOnInit(): void {
    this.currAcct = JSON.parse(this._storageService.getCurrAcct());

    this.isProjectTeamData = this.currAcct.isProjectTeamData;
    this.isRequestIntakeReadOnly = this.currAcct.isRequestIntakeReadOnly;
    this.isRequestIntakeSubmitter = this.currAcct.isRequestIntakeSubmitter;
    this.requestsListTable.dataSource = new MatMultiSortTableDataSource(this.sort, this.CLIENT_SIDE);
    // this.sort = new MatMultiSort();
    this.requestsListTable.nextObservable.subscribe(() => { this.initRequestsList(); });
    this.requestsListTable.sortObservable.subscribe(() => { this.initRequestsList(); });
    this.requestsListTable.previousObservable.subscribe(() => { this.initRequestsList(); });
    this.requestsListTable.sizeObservable.subscribe(() => { this.initRequestsList(); });
    this.getProjectIntakeDepartments();
    this.getRequestsCount();
    this.checkPageAccess();
    this.getUserData();
    this.requestsListTable.sortParams = ['requestTitle']
    this.requestsListTable.sortDirs = ['asc'];
  }

 ngAfterViewInit(): void {
    fromEvent<any>(this.searchInput.nativeElement, 'keyup')
      .pipe(
        map((event) => event.target.value),
        startWith(''),
        debounceTime(500),
        distinctUntilChanged(),
        switchMap(async (search) => {
          // this.setDefaultFilters();
          this.requestsListTable.pageIndex = 0;
          this.initRequestsList();
        })
      )
      .subscribe({ complete: noop });
  }

initRequestsList() {
    const currAcct = JSON.parse(this._storageService.getCurrAcct());

    const sortKey = (this.requestsListTable.sortParams.length > 0) ? this.requestsListTable.sortParams : ['requestTitle'];
    const sortOrder = (this.requestsListTable.sortDirs.length > 0) ? this.requestsListTable.sortDirs : ['asc'];
    
    const isMyRequests = (this.selectedOption === '1') ? currAcct.userId : null;
    
    this.isLoading = true;

    console.log('sortKey', sortKey)
    console.log('sortOrder', sortOrder)


    this._projectIntakeService
      .getRequestsList(
        currAcct.accountId,
        isMyRequests,
        sortKey,
        sortOrder,
        this.searchInput.nativeElement.value || '',
        this.requestsListTable.pageIndex + 1,
        this.requestsListTable.pageSize,
        this.selectedDepartmentIds,
        this.selectedStatusIds
      )
      .pipe(finalize(() => (this.isLoading = false)))
      .subscribe({
        error: (err) => this._notificationService.showError(err),
        next: (res) => {
          this.firstItemPosition = res.firstItemOnPage;
          this.lastItemPosition = res.lastItemOnPage;
          this.dataSource = res.items;
          this.requestsListTable.data = res.items;
          this.lastItemOnPage = res.lastItemOnPage;
          this.totalItemCount = res.totalItemCount;
        },
        complete: _.noop,
      });
  }


 getUserData() {
    this._userService.getUserProfile(this.currAcct.userId, this.currAcct.accountId)
      .subscribe(
        res => {
          if (res.isSuccess) {
            const filteredAccounts = this.filterAccountsByName(res.data.userAccountDto, this.currAcct.accountName);
            this.projectIntakeSettings = JSON.parse(filteredAccounts[0].projectIntakeSettings);

            //request type
            this.selectedOption = (this.projectIntakeSettings.UserId) ? '1' : '2';

            //page
            this.requestsListTable.pageIndex = (this.projectIntakeSettings.Page) ? this.projectIntakeSettings.Page - 1 : 0
            this.requestsListTable.pageSize = (this.projectIntakeSettings.PageSize) ? this.projectIntakeSettings.PageSize : 10;


            // Check if sortKey and sortOrder are provided in projectIntakeSettings
            const sortKey = this.projectIntakeSettings.SortKey ? JSON.parse(this.projectIntakeSettings.SortKey) : ['requestTitle'];
            const sortOrder = this.projectIntakeSettings.SortOrder ? JSON.parse(this.projectIntakeSettings.SortOrder) : ['asc'];

            // Assign sortParams and sortDirs
            this.requestsListTable.sortParams = sortKey;
            this.requestsListTable.sortDirs = sortOrder;

          }
        },
        err => {
          AppUtils.errorHandler(err, this._notificationService, null);
        }
      )

  }

#html 代码

<div class="table-center mat-elevation-z8">
                      <table
                      mat-table
                      [dataSource]="requestsListTable.dataSource"
                      matMultiSort
                      [@animateStagger]="{value:'50'}"
                      (matSortChange)="requestsListTable.onSortEvent()"  
                      (contentChanged)="isLoading = false">

                    <ng-container matColumnDef="requestTitle" sticky>
                      <th mat-multi-sort-header="requestTitle" mat-header-cell *matHeaderCellDef>Request Title</th>
                      <td mat-cell *matCellDef="let element">
                        <div class="checkbox-container td-value-name">
                          <mat-checkbox matTooltip="{{ isNotAllowedBulk(element) ? 'Unable to batch approve' : '' }}"
                            [checked]="isSelected(element)" [disabled]="isNotAllowedBulk(element)" class="no-navigation"
                            color="primary" (change)="onChangeSelect(element, $event, 'request')"></mat-checkbox>
                          <div style="width:180px;" [matTooltip]="element.requestTitle" class="td-value-name request-title">{{
                            element.requestTitle?.length > 45 ? element.requestTitle.slice(0,45) + '...' : element.requestTitle }}</div>
                        </div>
                      </td>
                    </ng-container>

                    <ng-container matColumnDef="requestorName">
                      <th mat-multi-sort-header="requestorName" mat-header-cell *matHeaderCellDef>Requestor Name</th>
                      <td mat-cell *matCellDef="let element">
                        <div class="td-value-name">
                          {{element.requestorName}}
                        </div>
                      </td>
                    </ng-container>

Answer 1

matSortHeader 可能不起作用的原因之一是因为它被添加到异步块中。

this.requestsListTable.sortParams = ['requestTitle']
this.requestsListTable.sortDirs = ['asc'];

您尝试在组件视图已渲染后分配 sortData。

我认为您可以尝试在 subscribe 方法中使用 ChangeDetectorRef 中的 detectorChanges() 来确保在获取 userProfile 后出现新值后重新渲染模板。

示例：

 getUserData() {
    this._userService.getUserProfile(this.currAcct.userId, this.currAcct.accountId)
      .subscribe(
        res => {
          if (res.isSuccess) {

             ......

            // Assign sortParams and sortDirs
            this.requestsListTable.sortParams = sortKey;
            this.requestsListTable.sortDirs = sortOrder;

            this._cd.detectChanges();
          }
        },