NgModel 未绑定 HTML - Angular 9

Question

我有一个 angular ng-autocomplete 下拉字段（https://www.npmjs.com/package/angular-ng-autocomplete），用于 table。

            <div class="">
              <ng-autocomplete 
                [(ngModel)]="data.CC" [(initialValue)]="data.CC"
                [data]="CCData"
                [searchKeyword]="keyword" placeHolder="Select" (selected)='selectEvent($event)'
                name="testfield" 
                [itemTemplate]="itemTemplate" [notFoundTemplate]="notFoundTemplate">
              </ng-autocomplete>
              <ng-template #itemTemplate let-item>
                <a [innerHTML]="item.dispName"></a>
              </ng-template>
              <ng-template #notFoundTemplate let-notFound>
                <div [innerHTML]="notFound"></div>
              </ng-template>                  
            </div>

我有一个对象数组，我正在其上迭代 table 数据。 [(ngModel)] 在页面加载时不绑定，但当我单击页面上的任何位置时它会快速绑定。我还显示了模型的 JSON 数据并且它保存了值，但是当页面 load.I 没有出现任何错误时不要绑定。

页面加载时如下所示：上面的值是我显示的JSON，我希望控制字段中的值相同

接下来当我点击页面上的任意位置时，它会快速将值绑定到控件

我找不到为什么会这样。任何输入都会有所帮助。

编辑：

完整的解决方案是我有 angular-calendar(https://angular-calendar.com/#/kitchen-sink) 单击日期我尝试加载日历数据，对于当前日期，如果存在数据，下面的网格会自动加载，它适用于其他控件，但不适用于 ng-autocomplete，它仅适用于单击页面上的某处。 ts代码：

ngOnInit() {
var d = new Date();
this.selectedDate = this.locaDatePipe.transform(d, "yyyy-MM-dd");
this.month = d.getMonth();
this.tsData = {
  "data": [
    { "timeRecordId": 0, "stTime": "", "edTime": "", "efforts": "", "costCarrier": "", "description": ""}
  ]
};        
var event=[{"start": new Date(),
        "title": '',
        "meta": {               
          "stTime": "11:39",
          "edTime": "13:39",             
          "costCarrier": "4",
          "desc": "test3",              
        },
      }];
this.displayEvent(new Date(),ev);
}
       
displayEvent(date, events): void { 
for (var i = 0; i < events.length; i++) {
  this.tsData.data[i] = {
    "timeRecordId": events[i].meta.timeRecordId,
    "stTime": events[i].meta.stTime, 
    "edTime": events[i].meta.edTime,                
    "description": events[i].meta.description, "systemName": events[i].meta.systemName,        
    "costCarrier" : this.getFilteredCodes(this.costCarrierData, "costCarrierId", events[i].meta.costCarrier)[0].dispName,                
  };
}

}

var event 格式与 angular-calendar 一致，因此数据也绑定到日历。

Answer 1

可能不是答案，但我能够找到并替代上述问题，我使用 primeng 自动完成 https://primefaces.org/primeng/showcase/#/autocomplete 代替 ng-autocomplete，它更容易实现。

https://stackblitz.com/edit/primeng-autocomplete-demo

NgModel 未绑定 HTML - Angular 9

NgModel not getting bound in HTML - Angular9

angular

angular9