ngtsc(2345) - 'Event' 类型的参数不可分配给'SortEvent' 类型的参数

Question

我是角度新手。我一直在尝试对列进行排序，但我不断收到此错误：

“Event”类型的参数不能分配给“SortEvent”类型的参数。 “事件”类型缺少“排序事件”类型的以下属性：列、方向 - ngtsc(2345)。

关于如何进行这项工作的任何建议？

s-product-management.component.html:

<form>
        <div class="form-group form-inline">
        Full text search: <input class="form-control ml-2" type="text" name="searchTerm" [(ngModel)]="service.searchTerm"/>
        <span class="ml-3" *ngIf="service.loading$ | async">Loading...</span>
        </div>
                          
        <table class="table table-striped">
             <thead>
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col" sortable="name" (sort)="onSort($event)">Country</th>
                   <th scope="col" sortable="area" (sort)="onSort($event)">Area</th>
                   <th scope="col" sortable="population" (sort)="onSort($event)">Population</th>
                 </tr>
              </thead>
              <tbody>
               <tr *ngFor="let product of products$ | async">
                <th scope="row">{{ product.id }}</th>
                 <td>
                  <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + product.flag" class="mr-2" style="width: 20px">
                  <ngb-highlight [result]="product.name" [term]="service.searchTerm"></ngb-highlight>
                  </td>
                  <td><ngb-highlight [result]="product.area | number" [term]="service.searchTerm"></ngb-highlight>
                  </td>
                  <td><ngb-highlight [result]="product.population | number" [term]="service.searchTerm"></ngb-highlight></td>
                 </tr>
                </tbody>
            </table>
                          
            <div class="d-flex justify-content-between p-2">
                <ngb-pagination [collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
                </ngb-pagination>
                          
                <select class="custom-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
                                <option [ngValue]="2">2 items per page</option>
                                <option [ngValue]="4">4 items per page</option>
                                <option [ngValue]="6">6 items per page</option>
                 </select>
</div>
                          
</form>

s-product-management.component.ts：

@Component(
    {selector: 'app-s-product-management', templateUrl: './s-product-management.component.html', providers: [ProductService, DecimalPipe]})

export class SProductManagementComponent {
  products$: Observable<Product[]>;
  total$: Observable<number>;

  @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;

  constructor(public service: ProductService) {
    this.products$ = service.products$;
    this.total$ = service.total$;
    this.headers = new QueryList();
  }

  onSort({column, direction}: SortEvent) {
    // resetting other headers
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });

    this.service.sortColumn = column;
    this.service.sortDirection = direction;
  }
}

sortable.directive.ts：

export type SortColumn = keyof Product | '';
export type SortDirection = 'asc' | 'desc' | '';
const rotate: {[key: string]: SortDirection} = { 'asc': 'desc', 'desc': '', '': 'asc' };

export interface SortEvent {
  column: SortColumn;
  direction: SortDirection;
}

@Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()'
  }
})
export class NgbdSortableHeader {

  @Input() sortable: SortColumn = '';
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();

  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({column: this.sortable, direction: this.direction});
  }
}

Answer 1

您需要将NgbdSortableHeader 添加到declarations for app.module.ts。

这样您的NgbdSortableHeader 指令已注册，并将通过rotate() 发出带有SortEvent 对象的事件。

import { NgbdSortableHeader } from './directives/sortable.directive';

@NgModule({
  ...
  declarations: [
    ...
    NgbdSortableHeader
  ]
})
export class AppModule {}

Sample Solution on StackBlitz

---

参考文献

Angular Bootstrap Sortable Table Demo

Answer 2

$event 与您需要的 SortEvent 类型不同。 $event 将始终包含很多键值对，除非您使用的不是遗留元素。