绑定到现场的ng-model不起作用

时间:2017-02-15 08:55:42

标签: angularjs ionic-framework ionic2

使用ng-model我希望将字段绑定到数组对象this.enhancements[item.id] = { checked: false, qty: 0 };,因此每当选中checkboxinput字段有某些值时,它都会自动填入数组对象。

以下是我目前正在使用的代码。请告诉我我做错了什么。

home.ts

export class HomePage {

  extras: any;
  enhancements: any;

  constructor(public navCtrl: NavController, public http: Http) {
    this.http.get('https://www.example.com/api/enhance/11/?format=json').map(res => res.json()).subscribe(response => {
        this.extras = response.Extras;
        this.enhancements = {};
        this.extras.forEach(item => {
          this.enhancements[item.id] = { checked: false, qty: 0 };
        })
    });
  }

  onChange(){
    console.log( this.enhancements );
  }

}

home.html的

<ion-content padding>
    <ion-grid>
        <ion-row *ngFor="let item of extras" id="booking-enhancements-wrap-{{ item.id }}">
            <ion-col width-10>
                <ion-checkbox (ionChange)="onChange()" ng-model="enhancements[item.id].checked" ng-checked="enhancements[item.id].checked"></ion-checkbox>
            </ion-col>
            <ion-col width-70>{{ item.name }}</ion-col>
            <ion-col width-20><input type="number " id="qty-{{ item.id }} " style="width: 100%; " (input)="onChange()" ng-model="enhancements[item.id].qty" /></ion-col>
        </ion-row>=
    </ion-grid>
</ion-content>

2 个答案:

答案 0 :(得分:3)

如果您使用ionic2那么您就不能使用ng-model

你必须使用[(ngModel)]

请参阅https://ionicframework.com/docs/v2/api/components/checkbox/Checkbox/

答案 1 :(得分:1)

试试这个 取代

this.enhancements = {};

this.enhancements = [];