Why does NgFor render “template_bindings = {}” in the DOM instead of the data-bound elements in my Component?

Question

When I inspect the data (cities and counties) in DevTools, it's being loaded properly. Everything on the template is loading properly too (no errors being thrown), except that the values of the option elements aren't rendering. Unfortunately, because Angular 2 just went beta, the syntax is different depending on when X blog post was written, or when Y SO question was asked, or even which page on angular.io you're looking at. No idea what I'm missing here.

I realize assigning the value attr and adding text is probably overkill, but neither makes a difference.

import {Component} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {City, County, RegionalData} from './interfaces';
import {api} from './api.service';

@Component({
    selector: 'geo-selector',
    template: `
        <div>
            <select name="region-selector">
                <optgroup label="Cities">
                    <option *ngFor="#city of cities" selected="selected" [value]="city.name">{{city.name}}</option>
                </optgroup>
                <optgroup label="Counties">
                    <option *ngFor="#county of counties" [value]="county.name">{{county.name}}</option>
                </optgroup>
            </select>
            <label for="">Zip Search</label>
            <input type="text" name="zip-search"/>
        </div>
                        `,
    providers: [api],
    directives: [NgFor]
})

export class GeoSelector {
        public cities: City[];
        public counties: County[];

        constructor(private _api:api) {
            this.getRegions();
        }

        getRegions(): void {
            this._api.getRegions().then(function(data: RegionalData) {
                this.cities = data.cities;
                this.counties = data.counties;
            });
        }

        onSelect() {

        }

}

When I inspect the elements in DevTools, in the space where the option elements should be, I see this:

<!--template bindings={}-->

A clue: I see that the comment is being rendered by setBindingDebugInfo in angular2/ts/src/platform/dom/dom_renderer.ts , which is "used only in debug mode to serialize property changes to comment nodes, such as <template> placeholders."

Answer 1

The getRegions promise callback is not properly written

getRegions(): void {
   this._api.getRegions().then((data: RegionalData) => { 
          this.cities = data.cities;
          this.counties = data.counties;
    });
}

use this notation, otherwise this refers to the callback function, instead of the GeoSelector class