小编Emm*_*mmy的帖子

我有一个 mat-table，其中有几个可排序的列。我可以使用 mat-table 上的 matSortActive 和 matSortDirection 属性设置表格的初始排序。使用此功能，可以正确显示标题中指示排序方向的箭头。

现在，当我尝试使用按钮将排序重置为初始状态时，排序已正确重置。但是，标题中的箭头不会更新。所以箭头仍然显示在上一个排序列的标题中。如何让箭头再次显示在初始状态？

我的表格和 HTML 中的重置按钮：

<button mat-button mat-raised-button (click)="removeFilters()" class="reset-button">Verwijder filters</button>

<mat-table #table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)" matSortActive="comp_name_sort" matSortDirection="asc">
  <ng-container matColumnDef="assetName">
    <mat-header-cell *matHeaderCellDef mat-sort-header="comp_name_sort">Systeem</mat-header-cell>
    <mat-cell *matCellDef="let asset"> {{asset.comp_name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="softwareName">
    <mat-header-cell *matHeaderCellDef mat-sort-header="soft_name_sort">Software</mat-header-cell>
    <mat-cell *matCellDef="let asset"> {{asset.soft_name}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

我的 ts 文件：

  export class AssetsComponent implements OnInit {

  @ViewChild(MatSort) sort: MatSort;

  assets: Asset[];
  displayedColumns = ['assetName', 'softwareName',];
  dataSource = new MatTableDataSource<Asset>(this.assets);

  constructor( private assetsService: …

我正在尝试在 react 16.4.1 中使用传单插件 polylinedecorator（所以没有钩子）。但是，我能够找到的关于如何在 react 中使用此插件的唯一示例是使用钩子（请参阅：如何将 polylinedac​​orator 与 react 传单一起使用），我不确定如何调整它以便能够在我的代码。

到目前为止，我拥有的是这个 polylinedecorator 组件：

import React, { Component } from "react";
import { Polyline } from "react-leaflet";
import L from "leaflet";
import "leaflet-polylinedecorator";

export default class PolylineDecorator extends Component {
  componentDidUpdate() {
    if (this.props.map) {
        const polyline = L.polyline(this.props.positions).addTo(this.props.map);

        L.polylineDecorator(polyline, {
            patterns: [
                {
                  offset: "100%",
                  repeat: 0,
                  symbol: L.Symbol.arrowHead({
                    pixelSize: 15,
                    polygon: false,
                    pathOptions: { stroke: true }
                  })
                }
              ]
        }).addTo(this.props.map);
    }
  }

  render() {
    return …