Angular 4：JSON字符串转TypeScript对象失败求助（附代码）

我来帮你搞定这个问题！你现在遇到的是Angular里把JSON响应转换成TypeScript对象不成功的情况，咱们一步步来排查和解决：

1. 先明确核心问题：TypeScript需要类型定义 #

TS是强类型语言，直接把JSON转成any类型没办法让它识别成你想要的对象结构，所以首先得定义对应JSON结构的TypeScript接口。

比如假设你的my.json内容是这样的列表：

[
  {"id": 1, "name": "Item 1", "status": "unauthorized"},
  {"id": 2, "name": "Item 2", "status": "unauthorized"}
]

那你就要先定义对应的接口：

// 可以单独放在一个文件里，比如item.interface.ts
export interface AuthorizedItem {
  id: number;
  name: string;
  status: string;
  // 其他和JSON对应的字段都要写上
}

2. 修改服务代码，指定返回类型并正确转换 #

你的服务现在返回的是Observable<any>，改成指定类型的Observable，同时在map里明确转换类型：

import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { AuthorizedItem } from './item.interface'; // 引入接口

@Injectable()
export class YourDataService {
  constructor(private http: Http){ }
  private dataUrl='./assets/my.json';

  getListNonAuthorized(): Observable<AuthorizedItem[]> {
    return this.http.get(this.dataUrl)
      .map((response: Response) => {
        // 把JSON数组强制转换成我们定义的接口类型数组
        return response.json() as AuthorizedItem[];
      })
      .catch(this.handleError);
  }

  // 完善你的错误处理函数，方便排查问题
  private handleError(error: Response | any) {
    let errorMessage = '';
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errorMessage = `${error.status} - ${error.statusText}: ${err}`;
    } else {
      errorMessage = error.message ? error.message : error.toString();
    }
    console.error('数据请求出错:', errorMessage);
    return Observable.throw(errorMessage);
  }
}

3. 组件调用时正确订阅并使用类型化数据 #

在你的组件里，要正确订阅服务的Observable，并且把数据赋值给类型化的变量：

import { Component, OnInit } from '@angular/core';
import { YourDataService } from './your-data.service';
import { AuthorizedItem } from './item.interface';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  // 定义类型化的变量存储数据
  nonAuthorizedItems: AuthorizedItem[] = [];

  constructor(private dataService: YourDataService) { }

  ngOnInit() {
    this.dataService.getListNonAuthorized()
      .subscribe(
        (items: AuthorizedItem[]) => {
          this.nonAuthorizedItems = items;
          console.log('转换后的TypeScript对象:', this.nonAuthorizedItems);
          // 现在你可以正常访问items的属性，TS会给你类型提示，比如item.id、item.name
        },
        (error) => {
          console.error('获取未授权列表失败:', error);
        }
      );
  }
}

4. 额外建议：升级到HttpClient（Angular 4.3+） #

如果你的Angular版本是4.3及以上，强烈建议替换旧的Http模块为HttpClient，它默认会自动解析JSON响应，还支持泛型，代码更简洁：

// 服务代码改用HttpClient
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthorizedItem } from './item.interface';

@Injectable()
export class YourDataService {
  constructor(private http: HttpClient){ }
  private dataUrl='./assets/my.json';

  getListNonAuthorized(): Observable<AuthorizedItem[]> {
    // 直接用泛型指定返回类型，HttpClient自动解析JSON
    return this.http.get<AuthorizedItem[]>(this.dataUrl)
      .pipe(
        catchError(this.handleError) // rxjs 6+要用pipe操作符组合操作
      );
  }

  private handleError(error: any): Observable<never> {
    console.error('请求出错:', error);
    return throwError(() => new Error(error.message || '服务器错误'));
  }
}

排查小要点 #

• 确认./assets/my.json路径正确，Angular能访问到（可以直接在浏览器地址栏输入http://localhost:4200/assets/my.json测试）
• 确保接口的字段和JSON的字段大小写完全一致（TS是大小写敏感的）
• 如果JSON结构和接口不匹配，TS会给出类型错误提示，根据提示调整接口或者JSON内容

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