如何更新角度4中的文本框值并保存值本身而不刷新页面

Question

这里我编辑文本框值，如果该值是'缺席'。在我编辑该值并单击其前面的图标后，该值仅更新，如果我刷新页面。我想更新单击没有页面刷新的图标时的值。怎么做？

我附上了我在下面使用的html，typescript和web api代码。

//server side web api code
   [HttpPost]
        public HttpResponseMessage post([FromBody]Model model)
        {
            try
            {
                using (Entities entities = new Entities())
                {

                    var entity = entities.ATTENDANCE_LOG_TAB.FirstOrDefault(e => e.LOG_ID == model.log_id);

                    if (entity == null)
                    {
                        return Request.CreateErrorResponse(HttpStatusCode.NotFound, "Employee with id" + model.log_id.ToString());
                    }
                    else
                    {
                        entity.REMARKS = model.remark;

                        entities.SaveChanges();
                        return Request.CreateResponse(HttpStatusCode.OK, entity);
                    }
                }
            }
            catch (Exception e)
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, e);
            }


        }
        
 public class Model
    {
        public int log_id { get; set; }
        public string remark { get; set; }
    }
  

//typescript code
EditValue(event,remark,log_id) {

  console.log(remark.value);
   console.log(remark+" "+log_id );
   const headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
   const options = new RequestOptions({ headers: headers });

let body="log_id="+log_id+"&remark="+remark;
console.log(body);
 this.http_.post('http://localhost:12412/api/employee?',body ,options)
   .subscribe((data) => {console.log(data)} 
 ) ;

 

}

//html code

<div class="col-sm" ng-model="item_r.remarks">
     <div *ngIf="item_r.remarks === 'Absence'; else other">
     <input   [value]=item_r.remarks (enter)='item_r.remark=$event.target.value'           #titleInput  style="width:100px;text-align: center;">
     <span   class="glyphicon glyphicon-info-sign" aria-hidden="true"            style="color:purple" title="Edit" (click)="EditValue($event,titleInput.value,item_r.log_id)" >
     </span>
     </div>
     <ng-template #other>
       {{item_r.remarks}}
     </ng-template>
</div>

Answer 1

尝试双向绑定，而不是 [value] = item_r.remarks 。请参阅下面的示例

 <input  type="text" [ngModel] = "item_r.remarks" >

在官方documentation

中了解更多信息