Angular2 - Two-way data binding issue

Question

I have to click on a div that show a list of cities, when I click on one of the cities displayed I want to execute a method and display the cityName, for that my implement is so far like this:

Html of file 1

 <div [(ngModel)]="cityName" class="heads">{{cityName}}</div>

.js of file 1

@Injectable()
export class queryToDB {

  constructor(http) {
  this.http = http;
  this.valueToBeChanged = "Select a city";
  }

}

File 2 :

@Component({
      template: `
        <div>
               <button ion-item *ngFor="let city of cities" (click)="switchToThisCity(city.cityName);">{{city.cityName | uppercase}}</button>
        </div>
      `,
      providers:[queryToDB]
    })


export class MyPopover{
static get parameters(){
return [[Http]];
 }


constructor(http) {
    this.http    = http;
 }

 switchToThisCity(currentCity){
  this.cityName = "New York";
  }
 }

However, I receive the below error:

EXCEPTION: No value accessor for ''

Any ideas on what's causing the issue?

Answer 1

I think you shouldn't be tried to use ngModel to two way bind on div.

Because ngModel expects to use it on an input field or any other form elements. That's why you get the No value accessor error.

You can find out more at here