Question

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

<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对象，以便绑定到输入。

Answer 1

如果您从API获取数据，请不要使用点表示法。因为在加载DOM时你不会拥有节点＆＃39;属于＆＃39;过滤器＆＃39;变量。因此，请尝试使用过滤器[＆＃39;节点＆＃39;] [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">

让我知道它是否有效。

Answer 2

您可以使用变量更新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); //
  }

Answer 3

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

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

然后在您的ts文件中

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

Angular2 / 4。我可以将函数绑定到ngModel吗？

3 个答案: