как показать и скрыть элементы, созданные динамически из массива с помощью выбора в Angular 6

Question

Я создал эти 3 мат-карты из массива объектов, у этих объектов есть свойство bookingPrice.Я хочу показать те, чьи значения bookingPrice больше 2000. Это HTML-код для карточек.

<div class="mat-card-wrapper">
    <mat-card #maty *ngFor="let person of dataArray">
        <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>

А также создал этот выбор:

<select #slct name="" (change)="change(slct)">
    <option value="xx">Filtrar por precio</option>
    <option value="under">Over 2000</option>
    <option value="over">Under 2000</option>
</select>

машинописный текст c

Answer 1

Вы можете использовать ng-контейнер:

<mat-card #maty *ngFor="let person of dataArray">
     <ng-container *ngIf='person.bookingPrice > 2000'>
        <mat-card-title-group>....
     </ng-container>
</mat-card>