Example of solution to Angular reconstructing array fields

question

Some drop-down arrays with too much data cannot be statically defined and can only be obtained through the API. However, the array fields given by the API are various, while the drop-down box in my pop-up window is fixed to the array fields, for example:
The data structure given by the API is:

{
    id:'',
    text:''
}

The fixed data structure required for my pop-up window is:

{
    type:'',
    value:''
}

The code called is:

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

That is, I need to modify all ids in the array to value and text to type

Solution

Solution: I don’t plan to modify the original array field directly, but use push.
That is, I set an empty array and use oneforeachLoop, make its type=text, value=id, push the original data into this empty array one by one, and the end of the loop is the array I want.

sProductCat1List: any[] = [{ type: '', value: '' }]; // Define array.getsProductCat1().subscribe(res => {
      const List = res['data'] || []; // Step 1      let i = 0; // Step 2      (index => { // Step 3        this.sProductCat1List[i].type = ;
        this.sProductCat1List[i].value = ;
        i++;
        this.({ type: '', value: '' });
      });
    });

.getsProductCat1()In order to obtain the functions of API array, I will not explain much here.

Define array: The reason is not set toany[] = [], because empty array cannot be pushed into{ type: '', value: '' }Step 1: Set an array of constants to get the original array of the API Step 2: Set the loop number (it seems to be not set, mainly for detection) Step 3: Note that because the defined array{ type: '', value: '' }, so you need to pass the value first and then push it, if you need one{ type: '', value: '' }Used as "not selected", you can push first and then pass the value.

The above is the detailed content of the solution example of Angular reconstructing array fields. For more information about Angular reconstructing array fields, please pay attention to my other related articles!