【问题标题】:Why my md-autoComplete is not displaying return values为什么我的 md-autoComplete 不显示返回值
【发布时间】:2015-11-27 19:34:44
【问题描述】:

我是第一次使用 Angular 材质。我遇到了自动完成的问题。下面是我的模板:

<md-autocomplete class="flex"
                 md-no-cache="true"
                 md-selected-item="c.receipt"
                 md-item-text="item.name"
                 md-search-text="SearchText"
                 md-items="item in querySearch(SearchText)"
                 md-floating-label="search">
    <md-item-template>
        <span><span class="search-result-type">{{item.GEOType}}</span><span md-highlight-text="SearchText">{{item.GEOName+(item.country?' / '+item.country:'')}}</span></span>
    </md-item-template>
    <md-not-found>No matches found.</md-not-found>
</md-autocomplete>

在 ctrl 中我有:

$scope.querySearch = function (query) {
    var GeoDataAPIUrl = '/api/TargetSettings/RetrieveCorridorLeverValues';
    if (query.length < 5)
        return;
    else {
        var GeoDataSearchUrl = GeoDataAPIUrl + '?' + 'strGeoName=' + query;
        $http
            .get(GeoDataSearchUrl)
            .then(function (geoAPIResponse) {
                console.log("GeoAPIResponse was ", geoAPIResponse);
                return geoAPIResponse.data;
            },
            function (geoAPIError) {
                console.log("GeoAPI call failed ", geoAPIError);
            });
    }
};

使用上面的代码,我没有得到任何建议,只显示我未找到的文本,而我的 http 调用返回一个也在控制台中打印的数组。我错过了什么吗??

我在很多地方看到,人们使用了一些带有自动完成功能的过滤器,我认为这不是必需的。

请建议如何进行上述工作。

【问题讨论】:

标签: angular-material md-autocomplete


【解决方案1】:

$http 返回 promise 并且 md-autocomplete 使用相同的 promise 来显示结果。在您的情况下,您正在返回结果但不是承诺。你的代码应该是

$scope.querySearch = function (query) {
    var GeoDataAPIUrl = '/api/TargetSettings/RetrieveCorridorLeverValues';
    if (query.length < 5)
        return;
    else {
        var GeoDataSearchUrl = GeoDataAPIUrl + '?' + 'strGeoName=' + query;
        var promise = $http.get(GeoDataSearchUrl).then(function (geoAPIResponse) {
            console.log("GeoAPIResponse was ", geoAPIResponse);
            return geoAPIResponse.data;
        },
            function (geoAPIError) {
                console.log("GeoAPI call failed ", geoAPIError);
            });
        return promise;
    }
};

它现在可以工作了。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-12-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多