如何在Angular中按星级过滤酒店列表数据？

你可以通过前端本地过滤或后端API过滤来实现星级筛选，以下是具体实现步骤：

方案一：前端本地过滤（适合数据量较小的场景） #

1. 修改 hotels.component.ts #

将API返回的Observable转为本地数组存储，同时添加过滤条件变量与处理方法：

import { Component } from '@angular/core';
import { WebService } from './web.service';

@Component({
  selector: 'hotels',
  templateUrl: './hotels.component.html',
  styleUrls: ['./hotels.component.css']
})
export class HotelsComponent {
    hotel_list: any[] = [];
    filteredHotels: any[] = [];
    page: number = 1;
    selectedRating: number | null = null; // 存储选中的星级

    constructor(public webService: WebService) { }

    ngOnInit() {
        if (sessionStorage['page']) {
          this.page = Number(sessionStorage['page']);
        }
        // 订阅API数据并初始化过滤数组
        this.webService.getHotels(this.page).subscribe(data => {
            this.hotel_list = data;
            this.filteredHotels = [...this.hotel_list];
        });
    }

    // 星级过滤逻辑
    filterByRating() {
        if (!this.selectedRating) {
            this.filteredHotels = [...this.hotel_list]; // 清空条件显示全部
            return;
        }
        this.filteredHotels = this.hotel_list.filter(hotel => hotel.rating === this.selectedRating);
    }
}

2. 修改 hotels.component.html #

添加星级选择控件，并将循环对象替换为过滤后的数组：

<div class="container">
    <!-- 星级筛选控件 -->
    <div class="row mb-3">
        <div class="col-sm-12">
            <label for="ratingFilter">按星级筛选：</label>
            <select id="ratingFilter" [(ngModel)]="selectedRating" (change)="filterByRating()">
                <option [value]="null">全部</option>
                <option [value]="1">1星</option>
                <option [value]="2">2星</option>
                <option [value]="3">3星</option>
                <option [value]="4">4星</option>
                <option [value]="5">5星</option>
            </select>
        </div>
    </div>

    <!-- 酒店列表 -->
    <div class="row">
        <div class="col-sm-12">
            <div *ngFor = "let hotel of filteredHotels">
                <div class="card text-white bg-primary mb-3" 
                     style ="cursor : pointer"
                     [routerLink]="['/hotels', hotel._id]">
                    <div class="card-header">
                        {{ hotel.hotel }}
                    </div>
                    <div class="card-body">
                        This hotel is based in
                        {{ hotel.city }}
                    </div>
                    <div class="card-footer">
                        {{ hotel.rating }}
                        stars
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

关键注意 #

确保当前组件所属模块已导入FormsModule（因使用ngModel）：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他导入项
    FormsModule
  ]
})

方案二：后端API过滤（适合数据量较大的场景） #

若酒店数据量较大，前端过滤会影响性能，建议通过API传递星级参数，由后端数据库查询过滤。

1. 修改 WebService.ts #

在API请求中添加可选的星级参数：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class WebService {
    private hotelID: any;
    constructor(private http: HttpClient) { }
    // 添加rating可选参数
    getHotels(page: number, rating?: number) { 
        let url = `http://localhost:5000/api/v1.0/hotels?pn=${page}`;
        if (rating) {
            url += `&rating=${rating}`;
        }
        return this.http.get(url);
    }
}

2. 修改 hotels.component.ts #

更新组件逻辑，支持调用带星级参数的API：

import { Component } from '@angular/core';
import { WebService } from './web.service';

@Component({
  selector: 'hotels',
  templateUrl: './hotels.component.html',
  styleUrls: ['./hotels.component.css']
})
export class HotelsComponent {
    hotel_list: any;
    page: number = 1;
    selectedRating: number | null = null;

    constructor(public webService: WebService) { }

    ngOnInit() {
        if (sessionStorage['page']) {
          this.page = Number(sessionStorage['page']);
        }
        this.loadHotels();
    }

    // 加载酒店数据（支持星级过滤）
    loadHotels() {
        this.hotel_list = this.webService.getHotels(this.page, this.selectedRating || undefined);
    }

    // 星级变化时重新请求数据
    filterByRating() {
        this.loadHotels();
    }
}

3. 修改 hotels.component.html #

添加星级选择控件，循环对象仍使用hotel_list | async：

<div class="container">
    <!-- 星级筛选控件 -->
    <div class="row mb-3">
        <div class="col-sm-12">
            <label for="ratingFilter">按星级筛选：</label>
            <select id="ratingFilter" [(ngModel)]="selectedRating" (change)="filterByRating()">
                <option [value]="null">全部</option>
                <option [value]="1">1星</option>
                <option [value]="2">2星</option>
                <option [value]="3">3星</option>
                <option [value]="4">4星</option>
                <option [value]="5">5星</option>
            </select>
        </div>
    </div>

    <!-- 酒店列表 -->
    <div class="row">
        <div class="col-sm-12">
            <div *ngFor = "let hotel of hotel_list | async">
                <div class="card text-white bg-primary mb-3" 
                     style ="cursor : pointer"
                     [routerLink]="['/hotels', hotel._id]">
                    <div class="card-header">
                        {{ hotel.hotel }}
                    </div>
                    <div class="card-body">
                        This hotel is based in
                        {{ hotel.city }}
                    </div>
                    <div class="card-footer">
                        {{ hotel.rating }}
                        stars
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

关键注意 #

需确保后端API支持rating查询参数，能够根据星级过滤数据库中的酒店数据。

内容的提问来源于stack exchange，提问作者Beth McCoy