抓取输入值并将其插入* 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 
    } 
}