Angular中无法访问已存在的result属性？纯JS可正常访问的问题排查

报错原因 #

1. TypeScript强类型检查限制：Angular的HttpClient.get默认会把返回值推断为Object类型，而Object类型并没有result属性——哪怕接口实际返回了这个字段，TypeScript编译器依然会因为类型不匹配报错。
2. 参数位置错误：你代码里把format和normalizeMetadata放到了请求头headers中，这两个是URL查询参数，应该和chain一起放在params里。

解决方案 #

方案1：用any快速绕过类型检查（简单但不推荐） #

修改getdata方法，明确指定返回类型为Observable<any>，让TypeScript跳过属性检查：

import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

// ...组件类内部
getdata(): Observable<any> {
  // 正确设置请求头
  const headers = new HttpHeaders({
    accept: 'application/json',
    'X-API-Key': this.api
  });
  // 所有查询参数统一放到params中
  const params = new HttpParams()
    .set('chain', 'mumbai')
    .set('format', 'decimal')
    .set('normalizeMetadata', 'false');

  return this.http.get('https://deep-index.moralis.io/api/v2/0x8b61FC3df7a5Dd1972f6187Fbc3cc374e9845D2b/nft', { headers, params });
}

ngOnInit(): void {
  this.getdata().subscribe(data => console.log(data?.result));
}

方案2：定义接口类型（推荐，兼顾类型安全） #

为接口返回的数据结构定义TypeScript接口，让HttpClient明确返回值类型，同时获得类型提示和检查：

import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

// 定义接口匹配返回数据结构
interface NftApiResponse {
  total: number;
  page: number;
  result: Array<{
    token_id: string;
    contract_address: string;
    metadata: string;
    // 根据实际返回的NFT字段补充更多类型定义
  }>;
  // 其他返回字段可按需添加
}

// ...组件类内部
getdata(): Observable<NftApiResponse> {
  const headers = new HttpHeaders({
    accept: 'application/json',
    'X-API-Key': this.api
  });
  const params = new HttpParams()
    .set('chain', 'mumbai')
    .set('format', 'decimal')
    .set('normalizeMetadata', 'false');

  // 给get方法指定泛型类型
  return this.http.get<NftApiResponse>('https://deep-index.moralis.io/api/v2/0x8b61FC3df7a5Dd1972f6187Fbc3cc374e9845D2b/nft', { headers, params });
}

ngOnInit(): void {
  this.getdata().subscribe(data => console.log(data.result));
}

方案3：订阅时使用类型断言（临时调试用） #

如果不想修改方法返回类型，可在订阅时用类型断言临时告诉TypeScript数据的实际结构：

ngOnInit(): void {
  this.getdata().subscribe(data => {
    // 断言数据包含result属性
    const response = data as { result: any[] };
    console.log(response.result);
  });
}

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