ngModel 未在 *ngFor Angular 4 中更新
ngModel not updating in *ngFor Angular 4
当我通过单击添加按钮创建输入框时,输入框的 ngModel
没有更新。输入框正在填充。但是当我更改值时,相应的框值在输入框中更新,但不会在插值(组件)中更新
这是查看代码:
<div class=" dailyrep-div">
{{ settings_notification.thirtydreport_monthly.thirtydreport_monthly_time[i] | json }}
<div class="d-inline-block inputwi140 marg-right15 marg-bottom15" *ngFor="let t of settings_notification.thirtydreport_monthly.thirtydreport_monthly_time; let i=index ; trackBy:trackByIndex " >
<div class="input-group marg-right15">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="la la-clock-o"></i>
</span>
</div>
<input class="form-control m-input m_timepicker" readonly type="text" value="{{t.timeValue}}" [(ngModel)] = "settings_notification.thirtydreport_monthly.thirtydreport_monthly_time[i]" >
<button *ngIf=" i != 0 " class="align-top btn btn-danger m-btn m-btn--icon m-btn--icon-only" (click)="delete_thirtyDays_Report_monthly_index(i)" ><i class="la la-remove"></i></button>
</div>
</div>
<button *ngIf="settings_notification.thirtydreport_monthly.thirtydreport_monthly_time.length <=5 " class="align-top addbtn btn btn-success" (click)="add_thirtyDays_Report_monthly()" ><i class="la la-plus"></i>
Add</button>
</div>
这是我的组件代码:
trackByIndex(index: number, value: number) {
return index;
}
add_thirtyDays_Report_daily() {
this.settings_notification.thirtydreport_daily.thirtydreport_daily_time.push({ timeValue: '12:42' });
this.bindTimePickers();
}
delete_thirtyDays_Report_daily_index(id) {
console.log("delete option is: " + id);
this.settings_notification.thirtydreport_daily.thirtydreport_daily_time.splice(id, 1);
}
您正在将一个值绑定到一个对象
this.settings.report.thirtydreport_monthly_time.push({ timeValue: '12:42' });
thirtydreport_monthly_time 是一个对象为 { timeValue: 'time' }
的数组
您需要在 html
中绑定相应的模式
[(ngModel)]="settings.report_monthly.thirtydreport_monthly_time[i]['timeValue']
ngModel
没有更新。输入框正在填充。但是当我更改值时,相应的框值在输入框中更新,但不会在插值(组件)中更新
这是查看代码:
<div class=" dailyrep-div">
{{ settings_notification.thirtydreport_monthly.thirtydreport_monthly_time[i] | json }}
<div class="d-inline-block inputwi140 marg-right15 marg-bottom15" *ngFor="let t of settings_notification.thirtydreport_monthly.thirtydreport_monthly_time; let i=index ; trackBy:trackByIndex " >
<div class="input-group marg-right15">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="la la-clock-o"></i>
</span>
</div>
<input class="form-control m-input m_timepicker" readonly type="text" value="{{t.timeValue}}" [(ngModel)] = "settings_notification.thirtydreport_monthly.thirtydreport_monthly_time[i]" >
<button *ngIf=" i != 0 " class="align-top btn btn-danger m-btn m-btn--icon m-btn--icon-only" (click)="delete_thirtyDays_Report_monthly_index(i)" ><i class="la la-remove"></i></button>
</div>
</div>
<button *ngIf="settings_notification.thirtydreport_monthly.thirtydreport_monthly_time.length <=5 " class="align-top addbtn btn btn-success" (click)="add_thirtyDays_Report_monthly()" ><i class="la la-plus"></i>
Add</button>
</div>
这是我的组件代码:
trackByIndex(index: number, value: number) {
return index;
}
add_thirtyDays_Report_daily() {
this.settings_notification.thirtydreport_daily.thirtydreport_daily_time.push({ timeValue: '12:42' });
this.bindTimePickers();
}
delete_thirtyDays_Report_daily_index(id) {
console.log("delete option is: " + id);
this.settings_notification.thirtydreport_daily.thirtydreport_daily_time.splice(id, 1);
}
您正在将一个值绑定到一个对象
this.settings.report.thirtydreport_monthly_time.push({ timeValue: '12:42' });
thirtydreport_monthly_time 是一个对象为 { timeValue: 'time' }
的数组您需要在 html
中绑定相应的模式[(ngModel)]="settings.report_monthly.thirtydreport_monthly_time[i]['timeValue']