Angular怎么重構數組字段

本篇內容主要講解“Angular怎么重構數組字段”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Angular怎么重構數組字段”吧!

問題

有些數據過多的下拉框數組沒法靜態定義，只能通過API獲取，但API給出的數組字段各式各樣，而我彈窗中的下拉框對數組的字段卻是固定的，例如：
API給的數據結構是：

{
    id:'',
    text:''
}

而我彈窗所需要的固定數據結構為：

{
    type:'',
    value:''
}

調用的代碼為：

 <mat-select *ngSwitchCase="'select'" [formControlName]="form.value" [required]="form.required">
            <mat-option *ngFor="let opt of form.selectArr" [value]="opt.value">
              {{ opt.label ? opt.label : opt.type }}
            </mat-option>
          </mat-select>

也就是說，我需要將數組中所有的id修改為value，text修改為type

解決辦法

解決思路：我不打算直接去修改原來的數組字段，而采用push的方式。
也就是我設置一個空數組，利用一個foreach循環，使其type=text，value=id，將原來的數據一個一個push進這個空數組，最后循環結束得到的就是我想要的數組了。

sProductCat1List: any[] = [{ type: '', value: '' }]; // 定義數組
this.supplierService.getsProductCat1().subscribe(res => {
      const List = res['data'] || []; // 第一步
      let i = 0; // 第二步
      List.forEach(index => { // 第三步
        this.sProductCat1List[i].type = index.text;
        this.sProductCat1List[i].value = index.id;
        i++;
        this.sProductCat1List.push({ type: '', value: '' });
      });
    });

this.supplierService.getsProductCat1()為獲取API數組的函數，在此不多做解釋。

定義數組：之所以沒有設置為any[] = []，是因為空數組無法push進{ type: '', value: '' }第一步：設置一個常量數組，用于獲取API的原數組 第二步：設置循環數字（好像也可以不設置，主要是用來檢測） 第三步：注意，因為定義的數組{ type: '', value: '' }，所以需要先傳值，再push，如果你需要一個{ type: '', value: '' }用來作為“不選中”，則可以先push再傳值。

到此，相信大家對“Angular怎么重構數組字段”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！