使用 Nativescript 搜索数据答案

【问题标题】：Search data using Nativescript使用 Nativescript 搜索数据
【发布时间】：2019-06-18 13:05:20
【问题描述】：

我从这个函数中正确获取了所有数据：

getallpharma() {
    this.pharma.mobile_base_pharmacyGetAll().subscribe(
        items => {
            this.items = items;
        },
        err => console.error('err', err),
        () => console.log('error')
    );
}

这是 JSON

{ "StatusCode": 0,
"StatusMessage": "OK",
"StatusDescription": [
    {
        "pharmacy_id": "011E752345553380ABC13FFA163ECD15",
        "name": "Pharmacy",
        "email": "email@testpharmacy.com",
        "website": "testpharmacy.com",
        "address1": "Test Pharmacy, Test Country, Test City",

    },
    {
        "pharmacy_id": "011E762345552280FBC13FFA163ECD10",
        "name": "Test Pharmacy",
        "email": "email@testpharmacy.com",
        "website": "testpharmacy.com",
        "address1": "Test Pharmacy, Test Country, Test City",

    }
]

}

对于搜索，我正在使用这个不起作用的功能：

public items: Array<FarmaciaData> = [];
 public myData: ObservableArray<FarmaciaData> = new ObservableArray<FarmaciaData>();

    public onSearchSubmit(args) {
        let searchBar = <SearchBar>args.object;
        let searchValue = searchBar.text.toLowerCase();
        this.myData = new ObservableArray<FarmaciaData>();
        if (searchValue !== "") {
            for (let i = 0; i < this.items.length; i++) {
                if (this.items[i].name.toLowerCase().indexOf(searchValue) !== -1) {
                    this.myData.push(this.items[i]);
                }
            }
        }
    }

你能告诉我如何在这个函数中搜索数据吗？

【问题讨论】：

我猜你正在使用 Angular，在这种情况下你真的不必依赖 ObservableArray。如果您的 UI 没有更新，那么可能是您这样做的方式，可能是更改检测的问题。请分享一个可以重现问题的 Playground 示例。
演示play.nativescript.org/?template=play-ng&id=HlFUkD
@Manoj 你有什么想法吗？

标签： search nativescript

【解决方案1】：

这纯粹是合乎逻辑的，

    let searchBar = <SearchBar>args.object;
    let searchValue = searchBar.text.toLowerCase();
    this.filteredCountries = searchValue.length ? this.countries.filter(item => {
        return item['name'].toLowerCase().includes(searchValue)
    }) : this.countries;

当您没有搜索文本时返回所有内容，当您将名称转换为小写并过滤时。

Updated Playground

【讨论】：

【解决方案2】：

您需要使用数组的filter 函数。我已经更新了你的游乐场here。

在您的 .ts 中

let searchBar = <SearchBar>args.object;
        let searchValue = searchBar.text.toLowerCase();
        if (searchValue) {
            this.filteredCountries = this.countries.filter(item => {
                return item['name'].includes(searchValue)
            })
        } else {

        }

附：在我的项目中，我创建了一个管道来返回过滤后的数据。

【讨论】：