Question

目前，我正在尝试构建一个检索可观察的应用程序，然后您可以按照某些预定义的方式对其进行排序和/或过滤。

检索和排序数据工作正常：

sort.service.ts

import { Injectable } from "@angular/core"
import { HttpClient, HttpErrorResponse } from "@angular/common/http"
import { Observable } from "rxjs/Observable";
import { Subscriber } from "rxjs";
import "rxjs/add/operator/catch";
import "rxjs/add/operator/do";
import "rxjs/add/operator/map";
import { Property } from "../property/property.model";
import { UserSettings } from "../../data/usersettings/usersettings.service"

export class SortService {
    url = "/path/to/file.json";

    constructor(private http:HttpClient) {}

    getProperties(): Observable<Property[]> {
        return this.http.get<Property[]>(this.url);
    }
    sortAllProperties() {
        let count = 0;

        return this.getProperties()
        .map((data) => {        
            data.sort((a: Property, b: Property) => {
                const aP = a.price;
                const bP = b.price;
                const aS = a.areaSize;
                const bS = b.areaSize;
                const aR = a.numberOfRooms;
                const bR = b.numberOfRooms;
                const aB = a.numberOfBedrooms;
                const bB = b.numberOfBedrooms;

                /*if(this.userSettings.getAppSetting("filterMinPrice", "number") >= a.price)
                    console.log(a.price + " is smaller than " + this.userSettings.getAppSetting("filterMinPrice", "number"));*/

                const aID = a.ID;
                const bID = b.ID;

                //Price sort (primary)
                const priceSort = this.userSettings.getAppSetting("sortByPrice", "string");
                if(priceSort == "asc") {
                    if (aP > bP) return 1;
                    if (aP < bP) return -1;
                } else if (priceSort == "desc") {
                    if (aP < bP) return 1;
                    if (aP > bP) return -1;
                } else {
                    count++;                    
                }

                //Areasize sort (secondary)
                const sizeSort = this.userSettings.getAppSetting("sortBySize", "string");
                if(sizeSort == "asc") {
                    if (aS > bS) return 1;
                    if (aS < bS) return -1;
                } else if (sizeSort == "desc") {
                    if (aS < bS) return 1;
                    if (aS > bS) return -1;
                } else {
                    count++;
                }

                //Rooms sort (tertiary)
                const roomSort = this.userSettings.getAppSetting("sortByRooms", "string");
                if(roomSort == "asc") {
                    if (aR > bR) return 1;
                    if (aR < bR) return -1;
                } else if (roomSort == "desc") {
                    if (aR < bR) return 1;
                    if (aR > bR) return -1;
                } else {
                    count++;
                }

                //Bedrooms sort (quaternary)
                const bedroomSort = this.userSettings.getAppSetting("sortByBedrooms", "string");
                if(bedroomSort == "asc") {
                    if (aB > bB) return 1;
                    if (aB < bB) return -1;
                } else if (bedroomSort == "desc") {
                    if (aB < bB) return 1;
                    if (aB > bB) return -1;
                } else {
                    count++;
                }

                if(count = 4) {
                    return aID > bID ? 1 : -1;
                }
            })
            return data;
        })
    }
}

此处检索的数据如下所示：的 file.json

[
  {
    "ID": 1,
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing ...",
    "price": 800.25,
    "agreementType": "unknown",
    "streetName": "street1",
    "houseNumber": 249,
    "postCode": "postcode",
    "place": "New Orlands",
    "status": "status",
    "constructionYear": 1999,
    "areaSize": 5540,
    "numberOfRooms": 545,
    "numberOfBedrooms": 21,
    "garageType": "",
    "garageCapacity": 0
  },
  {
     //...
  }
]

和属性模型，JSON格式＆＃34;遵循＆＃34;到，看起来如下......

property.model.ts

export class Property {
    ID: number;
    description: string;
    price: number;
    agreementType: string;
    streetName: string;
    houseNumber: number;
    postCode: string;
    place: string;
    status: string;
    constructionYear: number;
    areaSize: number;
    numberOfRooms: number;
    numberOfBedrooms: number;
    garageType: string;
    garageCapacity: number;
}

我只是使用异步管道在属性组件中显示我的数据，该工作正常：*ngFor="let item of propertyData | async"。排序也有效。这是我遇到问题的过滤。

目前，我只是尝试在sortAllProperties()方法中应用静态过滤器。让它变得动态并赋予它自己的类，方法等可以在以后出现。

它也很难找到确切的正确信息，因为大多数信息都已过时并使用http而不是httpClient，这当然会略有不同。

到目前为止我所做的每一次尝试（都是从互联网示例中复制并稍微调整以适合我的用例）都会导致错误。我到目前为止最接近的是.filter((property) => property.price > 800)，我尝试放在.map()函数之前，后来导致同样的错误：

[ts]物业＆＃39;价格＆＃39;类型＆＃39;属性[]＆＃39;。
上不存在

可能是因为我错过了在过滤之前我应该在observable上使用的一些函数吗？我现在真的很茫然。

提前谢谢。

Answer 1

在另一位程序员的帮助下，我终于设法得到了解决方案。像往常一样，结果很简单：

return this.getProperties()
.map(properties => properties.filter(property=> property.price > 810)
.sort((a: Property, b: Property) => {
   //sorting stuff
})

对于一个过滤器而言。如果您想应用多个过滤器，您可能会执行类似

的操作

return this.getProperties()
.map(properties => properties.filter((property) => {
   //filter coniditions, arrays etc
   return property;
})
.sort((a: Property, b: Property) => {
   //sorting stuff
})

过滤Angular / Nativescript中的observable

1 个答案: