Angular重構數組字段的解決方法示例

更新時間：2022年09月20日 11:13:23 作者：再花

這篇文章主要為大家介紹了Angular重構數組字段的解決方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

問題

有些數據過多的下拉框數組沒法靜態(tài)定義，只能通過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循環(huán)，使其type=text，value=id，將原來的數據一個一個push進這個空數組，最后循環(huán)結束得到的就是我想要的數組了。

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的原數組第二步：設置循環(huán)數字（好像也可以不設置，主要是用來檢測）第三步：注意，因為定義的數組{ type: '', value: '' }，所以需要先傳值，再push，如果你需要一個{ type: '', value: '' }用來作為“不選中”，則可以先push再傳值。

以上就是Angular重構數組字段的解決方法示例的詳細內容，更多關于Angular重構數組字段的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: