Angular 綁定 ngModel 用於多選列表輸入

Question

我有一個包含大約 100 個輸入的 angular 模板表單。 他們中的許多人正在從不同的 mat-selection-lists 中捕獲值。 我能夠綁定到 ngModel 以獲取基本輸入。 但是，來自多 select 列表的值是字符串數組格式。 像 ["D", "V"]。 后端的 API 需要一個字符串來存儲值，我最終使用 JSON.stringify 進行了大量手動轉換來存儲它，然后使用 str.split(",") 在綁定到元素之前對其進行轉換。

Angular 中有沒有辦法自動轉換 ngModel 中的數據？ 有沒有辦法用 ControlValueAccessor / Directive 做到這一點？

<mat-selection-list   [(ngModel)]="formData.input98">
<mat-list-option value="D">D</mat-list-option>
<mat-list-option value="V">V</mat-list-option>
<mat-list-option value="T">T</mat-list-option>
</mat-selection-list>

Answer 1

Steve，一個帶有 ngModel 的 mat-selection-list 但返回一個值數組

<mat-selection-list #shoes [(ngModel)]="value">
  <mat-list-option *ngFor="let shoe of typesOfShoes" [value]="shoe">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

查看堆棧閃電戰

更新了，所以，一般來說你有一個服務

list(){
   return this.httpClient.get(...).pipe(
      map((res:any[])=>{
         res.forEach(x=>{
           x.property=x.property.split(",")
         })
         return res;
      })
   )

get(id){
   return this.httpClient.get(...).pipe(
      map((res:any)=>({...res,property=res.property.split(",")}))
   )
}
save(data:any){
   const dataCopy={...data,property=data.property.join(",")}
   return this.httpCient.post(....dataCopy)
}

Answer 2

你 map 你的后端 model 在綁定之前查看 model 然后 Z1D78DC8ED51214E5018B5114AEZ2 上它回來。

this.formData = Object.keys(formData).reduce((mappedData, key) => {
  mappedData[key] = formData[key].split(',');
  return mappedData;
}, {});

並以另一種方式保存 go

saveData = Object.keys(this.formData).reduce((mappedData, key) => {
  mappedData[key] = this.formData[key].join(',');
  return mappedData;
}, {});