Question

我从对象数组在Angular中创建了3张卡片。对象的属性之一是“价格”。如果我想包含一个带有2个选项的select元素，其中一个说“低于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的元素。 / p>

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

谢谢。

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

如何根据下拉菜单中的所选选项显示元素

1 个答案: