Angular 5绑定HTML下拉框异常：Asp.net Core 2.0数据无法获取

我来帮你排查并解决这个问题，咱们从几个关键错误点入手：

1. Angular服务中response.json的使用错误 #

你的CustomerService.ts里的getDistricts方法存在核心问题：response.json是一个方法，需要加括号调用response.json()；而且更重要的是——Angular 5的HttpClient已经默认自动解析JSON响应了，完全不需要手动调用json()方法！这是触发报错的主要原因。

修复后的服务代码：

getDistricts(): Observable<District[]> {
    // HttpClient会自动把响应解析为JSON对象数组，直接返回即可
    return this._http.get<District[]>(this.myAppUrl + '/Districts')
        .catch(this.errorHandler);
}

（建议指定返回类型为District[]而非any，这样能获得更严谨的类型提示）

2. 组件中异步操作的console.log时机问题 #

你的getAllDistricts方法里，console.log(this.districts)会在subscribe回调执行前就运行——因为HTTP请求是异步的，此时districts还没被赋值，会打印undefined。如果要查看正确的结果，把log放到subscribe回调内部：

getAllDistricts() {
    this._customerService.getDistricts()
        .subscribe(
            result => {
                this.districts = result;
                console.log(this.districts); // 这里才能拿到正确的返回数据
            },
            error => this.errorMessage = error
        );
}

3. HTML模板中的AngularJS指令误用 #

你的HTML里用了ng-model，这是AngularJS的指令，Angular 5应该用[(ngModel)]；但因为你用的是响应式表单，只保留formControlName="district"就足够了，直接去掉ng-model：

<select class="dropdown" name="district" formControlName="district" >
    <option *ngFor="let dist of districts" [ngValue]="dist.districtId" >
        {{dist.districtName}}
    </option>
</select>

额外的类型安全建议 #

确保前端District模型类的属性名和ASP.NET Core返回的District对象属性名完全一致（大小写敏感），比如后端返回的是DistrictId和DistrictName，前端模型也要对应：

export class District {
    districtId: number;
    districtName: string;
    // 其他对应属性...
}

按照这些步骤修改后，应该就能正常获取数据并绑定到下拉框了。

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