获取输入值并将其插入 *ngFor 指令？

Question

我还是 Angular/JS 的新手... 我正在通过过滤器管道显示一堆数据，现在我希望能够切换我的数据的排序方式：升序或下降。我有一个运行良好的“orderBy”管道，但我目前必须对方向进行硬编码，并且我希望它是动态的。我想通过两个单选按钮来实现这一点，但是我无法获取输入值并将其插入到我的 *ngFor 指令中。

<input type="radio" value="+"> Ascending<br>
<input type="radio" value="-"> Descending<br>

我需要抓住“+”或“-”并将其插入到“recordStartDate”之前。

<li (click)="showArtist(item);"
    *ngFor="let item of artists | search: field1Filter | orderBy:
    ['recordStartDate']">
</li>

['-recordStartDate'] 产生降序，['+recordStartDate']（或根本没有符号）产生升序。

实现这一目标的最佳方法是什么？

谢谢！

编辑：

我在这里使用这个管道：https://stackoverflow.com/a/35635370/8201772，这里有一个演示：http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby。请注意，在演示中，有一些选择选项通过“+”和“-”控制数据是按升序还是降序排序。如何复制这些选择选项功能？我会对原始答案发表评论，但我需要 50+ 名声才能这样做。谢谢！

编辑两个：

好的，所以我更新了两个单选按钮，如下所示：

<input type="radio" name="orderbydescending" [(ngModel)]="orderbydescending" value="['+recordStartDate']">Ascending<br>
<input type="radio" name="orderbydescending" [(ngModel)]="orderbydescending" value="['-recordStartDate']">Descending

并在我看来使用以下内容：

*ngFor="let item of artists | search: field1Filter | orderBy : orderbydescending"

然后我收到以下错误：http://imgur.com/a/KOxv5。

如果我删除“['”和“']”单选按钮的值，那么管道将停止正常工作（我仍然会遇到同样的错误）。

有什么想法吗？再次，硬编码这个工作完美。谢谢！

Answer 1

我实际上会使用一个布尔值来测试要过滤的方向

<input type="radio" [(ngModel)]="orderbydescending"  name="orderbydescending" value="false">Ascending<br>
<input type="radio" [(ngModel)]="orderbydescending"  name="orderbydescending" value="true">Descending

那么在你看来：

<li (click)="showArtist(item);" *ngFor="let item of artists | search: field1Filter | orderBy : orderbydescending">
    {{ data goes here }}
</li>

然后您的过滤器将接受 orderbydescending 值作为参数：

export class OrderByPipe implements PipeTransform {

    transform(value: any[], args?: any): any[] {
        // args holds true if ordering by descending, otherwise, you are ordering ascending
    }
}