如何根據下拉列表中的選定選項顯示元素

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