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
    }
}

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

1 个答案: