角2/4。我可以将函数绑定到 ngModel 吗？答案

【问题标题】：Angular2/4. Can I bind a function to ngModel?角2/4。我可以将函数绑定到 ngModel 吗？
【发布时间】：2021-02-03 18:44:19
【问题描述】：

我正在使用 ng-bootstrap 中的 ngbDatePicker。我正在尝试设置从 API 返回的默认日期。这似乎不起作用，因为我收到错误或浏览器冻结。代码sn-p是这样的

<input class="form-control" placeholder="dd-mm-yyyy" name="from" [ngModel]="formatDate(filter.nodes[0])" (ngModelChange)="filter.nodes[0] = updateDate($event)" ngbDatepicker #d1="ngbDatepicker">

filter.nodes[0] 是从 API 作为字符串返回的日期值。我需要将其格式化为 JS 对象以绑定到输入。

【问题讨论】：

检查是否存在 filter.nodes: [ngModel]="filter?.nodes?formatDate(filter.nodes[0]):null" (ngModelChange)="filter?.nodes && filter.nodes[0] = updateDate($event)"

标签： javascript angular ng-bootstrap

【解决方案1】：

您可以使用(ngModelChange)="yourMethod($event)" 将 ngModel 绑定到方法

<input label="Choose a year" (ngModelChange)="selectYearGraph($event)" [(ngModel)]="chosenYearDate" ></input>

然后在你的 ts 文件中

yourMethod($event){
//do your stuff
}

【讨论】：

【解决方案2】：

如果您从 API 获取数据，则不要使用点表示法。因为在加载 DOM 时，'filter' 变量中没有 'node' 属性。因此，请尝试使用 filter['node'][0]，此外，您还可以检查输入字段是否会在从 API 加载数据后显示。在你的情况下，你可以试试这个。

<input *ngIf="filter['nodes'] && filter['nodes'][0]" class="form-control" placeholder="dd-mm-yyyy" name="from" [ngModel]="formatDate(filter['nodes'][0])" (ngModelChange)="filter['nodes'][0] = updateDate($event)" ngbDatepicker #d1="ngbDatepicker">

让我知道它是否有效。

【讨论】：

ngbDatePicker 需要一个带有年月日的对象。你不可能用字符串给模型喂食。你需要，在任何地方做一些像： let datesteps=filter.nodes[0].split('-');fecha={year:parseInt(datesteps[0]),month:parseInt(datesteps[1]),day :parseInt(datestep[2])} 并制作关于 fecha 的 ngModel

【解决方案3】：

您可以使用变量来更新ngmodel并更改函数中的模态

<input class="form-control" placeholder="dd-mm-yyyy" name="from" [ngModel]="dateData" (change)="updateDate($event)" ngbDatepicker #d1="ngbDatepicker">

在 Ts 文件中：-

dateData:any;
 ngOnit(){
  //call the api and write below on success response block
  this.dateData = this.formatDate(this.filter.nodes[0]);
  // Sets the initial date value
 }
  updateDate($event){
  //update your date here
     let date = logictoGetDate($event);
     this.dateData=this.formatDate(date); //
  }

【讨论】：