快捷導(dǎo)航

Angular重構(gòu)數(shù)組字段的解決方法示例

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

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

問(wèn)題

有些數(shù)據(jù)過(guò)多的下拉框數(shù)組沒(méi)法靜態(tài)定義，只能通過(guò)API獲取，但API給出的數(shù)組字段各式各樣，而我彈窗中的下拉框?qū)?shù)組的字段卻是固定的，例如：
API給的數(shù)據(jù)結(jié)構(gòu)是：

{
    id:'',
    text:''
}

而我彈窗所需要的固定數(shù)據(jù)結(jié)構(gòu)為：

{
    type:'',
    value:''
}

調(diào)用的代碼為：

 <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>

也就是說(shuō)，我需要將數(shù)組中所有的id修改為value，text修改為type

解決辦法

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

sProductCat1List: any[] = [{ type: '', value: '' }]; // 定義數(shù)組
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數(shù)組的函數(shù)，在此不多做解釋。

定義數(shù)組：之所以沒(méi)有設(shè)置為any[] = []，是因?yàn)榭諗?shù)組無(wú)法push進(jìn){ type: '', value: '' }第一步：設(shè)置一個(gè)常量數(shù)組，用于獲取API的原數(shù)組第二步：設(shè)置循環(huán)數(shù)字（好像也可以不設(shè)置，主要是用來(lái)檢測(cè)）第三步：注意，因?yàn)槎x的數(shù)組{ type: '', value: '' }，所以需要先傳值，再push，如果你需要一個(gè){ type: '', value: '' }用來(lái)作為“不選中”，則可以先push再傳值。

以上就是Angular重構(gòu)數(shù)組字段的解決方法示例的詳細(xì)內(nèi)容，更多關(guān)于Angular重構(gòu)數(shù)組字段的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: