【问题标题】:Http failure during parsing in angular 7在角度 7 中解析期间的 Http 失败
【发布时间】:2019-07-19 21:24:06
【问题描述】:

当用户尝试通过输入字符进行搜索时,我正在实现一个剑道下拉菜单并尝试调用一个 api。我可以看到正在对 api 进行调用,并且 api 正在返回过滤后的值,但是数据没有被绑定。

我可以看到发生了错误并执行了 err 块。错误表明

http://localhost:54455/fund/HFRFundSearch?term=as 解析期间的 Http 失败

谁能告诉我问题是什么。是不是因为api返回了一个对象

这是我的代码

 <label for="inputFax" class="col-md-2  col-form-label header">Third Party Database Feed</label>
 <div class="col-md-3">
       <div *ngIf="!EditMode">{{FundDetails.HFRFundName}}</div>
         <kendo-dropdownlist style="width:350px" [(ngModel)]="HFRFunds" [data]="HFRFunds"  [filterable]="true" [valuePrimitive]="true"   textField="text" valueField="id"  (filterChange)="handleFilter($event)"></kendo-dropdownlist>
 </div>

组件

 handleFilter(value) {
        if (value.length >= 2) {
            this.fundService.getHFRFund(value)
            .subscribe(data => {
                this.HFRFunds = data;
            },
                err => {
                    this.Error = 'An error has occurred. Please contact BSG';
                },
                () => {
                });
        }
    }

服务

 constructor(
            private http: HttpClient,
            private config: AppConfig)
    { }

 getHFRFund(value : string) {
                let pars = new HttpParams();
                pars = pars.append('term', value.toString());
                const url = this.config.api.hfrFundSearch;
                return this.http.get(url, { params: pars, withCredentials: true });
        }

API。

[HttpGet]
        [AuthorizationLevel(AuthAccessLevel.Read)]
        public object HFRFundSearch(string term)
        {
            try
            {
                var hfrFunds = new List<object>();
                if (!string.IsNullOrEmpty(term))
                {
                    term = term.ToLower();
                    hfrFunds.AddRange(GetViewService<V_HFR_FUND>()
                        .Where(x => x.HFR_FUND_NAME.ToLower().StartsWith(term))
                        .Take(10)
                        .OrderBy(x => x.HFR_FUND_NAME)
                        .Select(x => new { id = x.HFR_FUND_ID, text = x.HFR_FUND_NAME })
                        .ToList());
                }

                return hfrFunds;
            }
            catch (Exception ex)
            {
                _logger.Error(ex);
                return ex;
            }
        }

【问题讨论】:

  • 您是否尝试从 c# 控制器返回 IActionResult?
  • 你能在你的订阅中console.log数据吗?您可以尝试在组件中使用管道和映射(在我下面的回答中)...

标签: angular asp.net-web-api


【解决方案1】:
// API
[HttpGet]
        [AuthorizationLevel(AuthAccessLevel.Read)]
        public object HFRFundSearch(string term)
        {
            try
            {
                var hfrFunds = new List<object>();
                if (!string.IsNullOrEmpty(term))
                {
                    term = term.ToLower();
                    hfrFunds.AddRange(GetViewService<V_HFR_FUND>()
                        .Where(x => x.HFR_FUND_NAME.ToLower().StartsWith(term))
                        .Take(10)
                        .OrderBy(x => x.HFR_FUND_NAME)
                        .Select(x => new { value = x.HFR_FUND_ID, text = x.HFR_FUND_NAME })
                        .ToList());
                }

                return hfrFunds;
            }
            catch (Exception ex)
            {
                _logger.Error(ex);
                return ex;
            }
        }


    // component
     // component
    import { map } from 'rxjs/operators';

    handleFilter(value) {            
       if (value.length >= 2) {                     
          this.fundService.getHFRFund(value).subscribe(
                data => {
                 this.HRFunds = data;
           });           
        }
    }

【讨论】:

  • 这似乎没有调用 api,因为断点没有被命中。老方法调用api
  • 是不是因为我没有调用订阅
  • 我不太了解 Kendo 如何实现 Angular,但是您的组件中有 filterChanges 方法吗?这是 Kendo 用于下拉列表和 Angular (telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/…) 的 API 的链接
  • 我认为我提到的问题与剑道无关。没有使用建议的地图代码调用 api
  • 你能在你的 handleFilter 方法中使用 console.log 吗? value.length >= 2 吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-02-22
  • 2018-03-06
  • 2019-05-13
相关资源
最近更新 更多