Angular7。单击（订购表）时，可以在3种状态之间无限期地迭代

Question

我想在Angular 7中订购一张桌子，当我单击标题时，我想在3种状态（asc，desc，disabled）之间切换。在打字稿中无限期地在这三个状态之间进行迭代的最佳方法是什么？

Answer 1

您可以创建一个保存该状态的变量。

let currentFilter = 0;

myState = [asc, desc, disabled];

然后是(click)="onFilter()"

使用方法onFilter() { this.currentFilter === 2 ? this.currentFilter = 0 : this.currentFilter += 1 }

使用此方法，您已经具有当前状态，然后单击即可遍历这三个状态。您甚至可以使用<span>{{ myState[currentFilter] }}</span>将其添加到标记中。

不过，在过滤逻辑上，您需要创建一种排序方法，如果已经设置了该方法，则需要创建Idk。您可以在onFilter()方法内调用它，然后使用新值。

如果您希望使所有内容保持简单和整洁，我会推荐：

filter = {
   currentFilter: 0,
   state: [asc, desc, disabled],
   onFilter: this.onFilter // basically putting the onFilter function here
}

，然后使用该对象进行迭代。您甚至可以将其作为类导出到某个地方，然后在希望进行过滤的任何地方重用它。

export class TableFilter {
    currentFilter = 0;
    state = [asc, desc, disabled];
    onFilter() { ... };
}

以及您的组件中

filter = new TableFilter();

然后使用它