Map函数中调用模型数组字段返回undefined问题求助

Hey there, let's troubleshoot why your ABC_Info array is returning undefined while date and time work perfectly. Here are the most common causes and straightforward fixes:

1. Check for API Response Field Name Mismatch #

The #1 culprit here is almost always a mismatch between the field name you're accessing (k['ABC_Info']) and what your actual API returns. APIs often use different casing conventions—like camelCase abcInfo instead of PascalCase ABC_Info, or snake_case abc_info.

To verify:

• Open your browser's DevTools > Network tab
• Locate the /api/abc/getAll request
• Inspect the response body to see the exact key name for the info array

If the API returns, say, abcInfo, update your code to match that key:

map(abc => abc.map(k => new ABC(
  new Date(k['date']),
  k['time'],
  k['abcInfo'] // Match the actual API field name here
)))

2. Add a Default Value for Missing Fields #

Even if the API should return ABC_Info, it might sometimes omit it (e.g., for empty records). To prevent undefined from being passed to your ABC constructor, add a fallback empty array:

map(abc => abc.map(k => new ABC(
  new Date(k['date']),
  k['time'],
  k['ABC_Info'] || [] // Fallback to empty array if undefined
)))

3. Use Type-Safe Interfaces for API Responses #

Using res as Object[] is too vague and hides type-related issues. Define an interface that matches your API's response structure to catch mismatches early:

First, add this interface (you can put it in abc.ts):

export interface ABCApiResponse {
  date: string; // APIs typically return dates as strings
  time: string;
  ABC_Info: { item: string, quantity: number, a: number }[];
}

Then update your service code to use this typed interface:

return this.baseService.getParams('/api/abc/getAll', params)
  .pipe(
    map(res => res as ABCApiResponse[] || []), // Use the typed interface
    map(abcList => abcList.map(abcData => new ABC(
      new Date(abcData.date),
      abcData.time,
      abcData.ABC_Info || []
    )))
  )

This way, TypeScript will throw an error if you misspell a field name, making debugging way easier.

Quick Debugging Tip #

Add a console.log inside your map to inspect each raw object and see exactly what's available:

map(abc => abc.map(k => {
  console.log('Raw API data:', k); // Check the actual data structure
  return new ABC(
    new Date(k['date']),
    k['time'],
    k['ABC_Info'] || []
  )
}))

This will show you exactly which fields are present in each object from the API response.

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