使用 angular html 和 ts 文件時如何在 select2 中綁定 [(ngModel)] 值（沒有 Javascript 或 Jquery）

Question

我正在嘗試向執行自動完成功能的下拉列表添加搜索選項。 我得到了一個帶有選擇標簽的基本下拉菜單。

我嘗試搜索以下選項：

1) 我嘗試使用 PrimeNG 將我的選擇表轉換為 p 下拉表，但沒有成功。

2）我找到了 angular 的 select2 選項，並且無法將下拉列表中的選定值綁定到 ngModel 值。 在上一頁或下一頁之間導航時，必須保留選定的值，但不會發生這種情況。

3）我也嘗試將選擇表轉換為 p-autocomplete，但不知道如何操作。 請用以下任何一種方式指導我。

這是提供的選擇下拉列表：

<select class="form-control" [(ngModel)]="selectedColumnDetails[rowData.rowId]"
   (ngModelChange)="handleChange(rowData.rowId)">
    <option *ngFor="let option of tableColumnDetails[selectedTableDetails[rowData.rowId]]">
          {{option.col_name}}
     </option>
</select>

這是我用 select2 嘗試的角度。 {{option.col_name}}

Error: No value accessor for form control with unspecified name attribute

為以下行引發此錯誤：

[(ngModel)]="selectedColumnDetails[rowData.rowId]

Answer 1

嘗試在同一個標​​簽中添加 name 屬性和 ngmodel

Answer 2

<select>與 ngModel 的工作方式略有不同。 獲取您的代碼片段，修改它以選擇 ControlValue

<select class="form-control" [(ngModel)]="selectedColumnDetails[rowData.rowId]" (ngModelChange)="handleChange(rowData.rowId)"> <option *ngFor="let option of tableColumnDetails[selectedTableDetails[rowData.rowId]]" [(ngValue)]="option"> {{option.col_name}} </option> </select>

應該為你工作。

您應該在此處和此處找到 angular 提供的大量示例

Answer 3

對於 Angular 中的 select2，請嘗試：

<select2 ... [value]="selectedColumnDetails[rowData.rowId]" (valueChanged)="handleChange(rowData.rowId)"></select2>

當然，您必須在handleChange(rowData.rowId)內更新selectedColumnDetails[rowData.rowId] 。

[(ngModel)]="data"是[value]="data" (input)="data = $event.target.value"縮寫。 不幸的是ng2-select2 包不支持input事件，所以你必須用valueChanged把它寫成長格式。