如何根据下拉列表中的选定选项显示元素

Question

我从一个对象数组中创建了3个Angular卡片。 对象的一个​​属性是“价格”。 如果我想要包含一个选择元素，有2个选项，其中一个说“低于2000”而另一个说“大于2000”，

只展示具有更高价格的元素的最佳方式是什么？例如，2000？

这是我做过的HTML：

<div class="mat-card-wrapper">
    <mat-card *ngFor="let person of dataArray; let i= index">
        <mat-card-title-group>
            <mat-card-subtitle>
                <span class="boldy">BookingId:</span>
                <span>
                    {{person.bookingId}}
                </span>
                <span class="boldy"> Cliente:</span>
                <span>
                    {{person.locationId.tutenUser.firstName +" "+
                    person.locationId.tutenUser.lastName}}
                </span>
                <span class="boldy">Fecha de Creación</span>
                <span>{{person.bookingTime}}</span>
                <span class="boldy">Dirección</span>
                <span>{{person.locationId.streetAddress}}</span>
                <span class="boldy">Precio</span>
                <span>{{person.bookingPrice}}</span>
            </mat-card-subtitle>
        </mat-card-title-group>
    </mat-card>
</div>

这会生成3张卡片，我不能用正确的方法添加一个简单的<selec>方法，它允许我只显示价格大于2000的元素和低于2000的元素。

我知道这是一个非常基本的问题，但是我被困住了，任何人都可以帮我这个吗？

谢谢。

Answer 1

您可以在ngFor中添加一个管道，根据您选择的内容（<2000或> 2000）过滤您的数据。

<mat-card *ngFor="let person of dataArray | myfilterPipe:myCondition">

你的烟斗看起来像这样：

 import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilterPipe',
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: condition): any {
        if (!items || !filter) {
            return items;
        }
        if(condition === over2000) {
           return items.filter(item => item.price > 2000);
        }
        if(condition === under2000) {
           return items.filter(item => item.price < 2000);
        }
    }
}