angular - mat-sort-header/mat-sort در یک ستون مشخص کار نمیکند

عنصر mat-sort روی یک ستون از mat-table که از یک پایگاه داده میآید کار نمیکند، بقیه ستونها کاملاً بدون مشکل کار میکنند. تنها تفاوت این است که من دادهها را برای این یک ستون از یک سرویس دیگر دریافت میکنم.

من سعی کردم آن را با ngAfterViewInit حل کنم اما بیفایده بود.

ngAfterViewInit(){
  this.dataSource.sort = this.sort;
};

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Resource </th>
  <td mat-cell *matCellDef="let element"> {{element.creator.name}} </td>
  <td mat-footer-cell *matFooterCellDef> </td>
</ng-container>

displayedColumns: string[] = ['projectName', 'date', 'hours', 'description', 'name', 'location', 'Edit'];

@ViewChild(MatSort) sort: MatSort;

ngOnInit(){
  this.dataSource.sort = this.sort;
}

پاسخ شماره ۱

با توجه به اینکه مدل دادههای شما را نمیدانم، چیزی شبیه به این باید مشکل شما را حل کند (در ngOnInit شما):

this.dataSource.sortingDataAccessor = (item, property) => {
  if (property === 'name') {
    return item.creator.name;
  } else {
    return item[property];
  }
};

مرتبسازی روی این فیلد کار نمیکند زیرا Angular سعی میکند به دادههای ستون از طریق شناسه رشتهای دسترسی پیدا کند، که برای این ستون name است، اما دادههای ستون در واقع تحت element.creator.name قرار دارند (Angular در حال جستجو در element.name است).

برای اطلاعات بیشتر، مستندات کامل را در اینجا بررسی کنید (در پایینترین قسمت صفحه) جایی که ذکر شده است:

تابع دسترسی به داده که برای دسترسی به ویژگیهای داده برای مرتبسازی از طریق تابع پیشفرض sortData استفاده میشود. این تابع پیشفرض فرض میکند که شناسههای سرصفحه مرتبسازی (که بهطور پیشفرض نام ستون است) با ویژگیهای داده مطابقت دارند (مثلاً ستون Xyz نمایانگر data['Xyz'] است). ممکن است برای رفتار متفاوت به یک تابع سفارشی تنظیم شود.

پاسخ شماره ۲

اگر یکی از فیلدها در mat-table شما کار نمیکند، باید displayedColumns خود را با کد HTML matColumnDef بررسی کنید.

اگر این مطابقت نداشت، سپس نیاز دارید که آن را به صورت مشترک برای هر دو طرف ts و html تنظیم کنید.

به عنوان مثال: displayedColumns در سمت TS دارای NAME و TAGSCREENS است و در سمت HTML شما نام دیگری میدهید، سپس سرصفحه مرتبسازی کار نخواهد کرد. اگر آن را مشترک کنید، برای شما کار خواهد کرد.

displayedColumns: string[] = ['name', 'tagScreens'];
dataSource= new MatTableDataSource([]);

شما نیاز دارید این کامپوننت MatSort را وارد کنید

@ViewChild(MatSort, { static: true }) sort: MatSort;

<ng-container matColumnDef="name">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
     <mat-cell *matCellDef="let element">{{element.name}} </mat-cell>
</ng-container>

 <ng-container matColumnDef="tagScreens">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Screens </mat-header-cell>
     <mat-cell *matCellDef="let element">
            {{ element.tagScreens.length > 0 ? (element.tagScreens | separateWithComa : seprateWithCommaPipeConst.name) : 'NA'}}
      </mat-cell>
 </ng-container>

برای اطلاعات بیشتر اینجا کلیک کنید