Angular5中使用Observable渲染列表时出现错误求助

Hey there! Let's figure out why your Observable-based list isn't rendering correctly and fix those errors. I'll walk through the most common issues with your code and how to resolve them step by step.

1. Fix the Initial undefined State of List$ #

Right now, your List$ Observable is declared but not initialized. When your component first loads, List$ is undefined, and the async pipe will return null for it. Trying to access .length on null throws a "Cannot read property 'length' of null" error—this is the most likely culprit.

Solution: Initialize List$ with an empty Observable so the async pipe always has valid data to work with:

// Component.ts
import { Observable, of } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

export class CommerceComponent implements OnInit { 
  // Initialize with empty array Observable to avoid initial null state
  public List$: Observable<any> = of([]); 

  getData(id){ 
    this.List$ = this.gateway.search(id); 
  } 
}

2. Add Error Handling to Your HTTP Request #

If your search API call fails (network issues, backend errors, invalid token), the Observable will emit an error. The async pipe can't handle errors by default, which will break your template entirely.

Solution: Add error handling in your service to catch failures and return a safe fallback (like an empty array):

// Services code
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';

search(id){ 
  var fd = new FormData(); 
  fd.append('token',this.cookieService.get('token')); 
  fd.append('search',id); 

  return this.http.post(config.url+'search',fd)
    .map((res: Response) => res.json())
    .catch((error: any) => {
      // Log the error for debugging purposes
      console.error('Search request failed:', error);
      // Return empty array to keep the template functional
      return Observable.of([]); 
    });
}

3. Verify Your API Response Structure #

If your backend doesn't return a plain array (e.g., it wraps the list in an object like { data: [...] }), then res.json() won't be an array, and accessing .length will throw an error.

Check: Open your browser's dev tools, go to the Network tab, and inspect the API response. If it's an object with a nested array, update your map operator to extract the correct data:

// Example if response is { data: [...] }
.map((res: Response) => res.json().data)

4. Use the Safe Navigation Operator (Quick Safeguard) #

As an extra layer of protection, you can use Angular's safe navigation operator (?.) in the template to prevent accessing properties on null/undefined:

<div class="deal-boxes" *ngIf="(List$ | async)?.length"> 
  <div class="deal1...">
    <!-- Your list items here -->
  </div>
</div>

Start with the first fix (initializing List$) since that's the most common issue here, then work through the others if you still run into problems. Let me know if you need further help!

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