ngModel 在 Angular 4 中无法正常工作

Question

I faced a problem with ngModel directive. I have an input <td><input type="text" ([ngModel])="desc"></td> in which I assigned value of that input to the variable called desc . Then in component I just want to print it in the console by:

addItem(){
    console.log('=======', this.desc);
  }

The method addItem() is decalred in html file below the input :

   <td>
            <i
              class="fa fa-plus-square add-button"
              (click)="addItem()">
            </i>
   </td>

The thing which I get back is: ======= undefined in the console. Can anyone tell me why I got this? In diffrent place of this app I'm also using ngModel and everything works good

Answer 1

The syntax of the data-binding operators ( and [ is wrong, if you want dual binding to work properly, you need to remember the famous sentence "Banana in a box" so you need to write [(ngModel)] it's like a banana in a box [()] .

For information, [ is for view to controller binding and ( for the inverse.