implicit context is undefined, angular 7

Question

Right, so I am iterating over an array of information and the information is showing the way that I want it to, however, I am getting some amaing looking errors in my console: ERROR TypeError: "_v.context.$implicit is undefined"

api service:

private extractData(res: Response) {
    let body = res;
    return body || {};
  }

  getWeather(city: string, isoCode: string): Observable<any> {
    return this.http.get(`${this.endPoint}${city},${isoCode}${this.constants.apiKey}`)
    .pipe(map(this.extractData));
  }

component using api service:

  theWeather:any = [];
  countryList = COUNTRIES;
  isLoading: boolean = true;
  showWeather: boolean = false;

  constructor(private apiCall:ApiService) { }


  ngOnInit() {
    this.retrieveWeather()
  };

  retrieveWeather() {
    console.log('COUNTRY LIST', this.countryList);

    this.theWeather = [];
    this.countryList.map((element, i) => {
      this.apiCall.getWeather(element.city, element.countryIso)
        .subscribe((data: {}) => {
          element.weatherInfo = data;
        });
        this.isLoading = false;
      });
      this.showWeather = true;
  };

and the html file:

<div class="country-container">
  <div *ngIf="isLoading">
    <mat-card>
      <mat-progress-spinner class="spinner-style" color="primary" mode="indeterminate"></mat-progress-spinner>
    </mat-card>
  </div>
  <div *ngIf="showWeather" class="card-container">
    <mat-card *ngFor="let c of countryList" class="card">
      <mat-card-title>Weather for: {{c.city}}, {{c.countryName}}</mat-card-title>
      <mat-card-content>The current weather is: {{c.weatherInfo.weather[0].description}}</mat-card-content>
    </mat-card>

  </div>
</div>

finally an image of my console:

Thank you for the help!

edit: made the title more specific to the issue.

Answer 1

You get this error when the angular template is looping through an array of items, and one or more of the array elements is undefined.

This can happen if you create your array by placing a value in a position using the following notation:

myArray[1] = myObject;

If you do this, then myArray[0] will not have a value, and when angular loops through it, you'll get the error "_v.context.$implicit is undefined".

It's safer to use:

myArray.push(myObject);

You might also get this if you remove an element from an array leaving an undefined value at an index.