html - Angular 展平内部阵列

Question

我正在尝试从表单值的嵌套数组中获取值

[['A'], ['B']]-- 来自这个数组

['A','B'] -- 试图获得这样的值(value)

堆栈 Blitz 示例 https://stackblitz.com/edit/angular-4d5vfj-p5adyk?file=main.ts

  <button (click)="addNewChipList()">Add new Chip</button><br><br>

       <form [formGroup]="myForm">
       <ng-container formArrayName="names"
      *ngFor="let item of myForm.get('names').controls; let i = index;">
        <mat-form-field class="example-chip-list" [formGroupName]="i">
           <mat-chip-list #chipList >
         <mat-chip *ngFor="let val of item.value.val"
    [selectable]="selectable"
    [removable]="removable"
    (removed)="removeChip(item, val)">
    {{val}}
    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
  </mat-chip>
  <input [placeholder]="item.value.name"
    [matChipInputFor]="chipList"
    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
    [matChipInputAddOnBlur]="addOnBlur"
    (matChipInputTokenEnd)="addChip($event, item)">
     </mat-chip-list>
    <mat-error>Atleast 1 name need to be added</mat-error>
      </mat-form-field>
            </ng-container>

           <button (click)="save()">save</button><br><br>
        </form>

组件.ts

我试图获取表单值的组件文件

         export class ChipListValidationExample implements OnInit {
         @ViewChild('chipList') chipList: MatChipList;
        public myForm: FormGroup;

       // name chips
          visible = true;
          selectable = true;
          removable = true;
          addOnBlur = true;
       readonly separatorKeysCodes: number[] = [ENTER, COMMA];

   // data
     data = {
          names: [this.initName('name1'), this.initName('name2', [['A'], 
      ['B']])]
   }

    constructor(private fb: FormBuilder) {
 this.myForm = this.fb.group({
   names: this.fb.array(this.data.names, this.validateArrayNotEmpty)
      });
      }

  ngOnInit() {
 this.myForm.get('names').statusChanges.subscribe(
  status => this.chipList.errorState = status === 'INVALID'
         );
      }

   initName(name: string, val: string[] = []): FormControl {
     return this.fb.control({ name, val});
         }

            validateArrayNotEmpty(c: FormControl) {
    if (c.value && c.value.length === 0) {
       return {
         validateArrayNotEmpty: { valid: false }
     };
       }
      return null;
        }

         addChip(event: MatChipInputEvent, ctrl: FormControl): void {
        const input = event.input;
            const value = event.value;

// Add name
        if ((value || '').trim()) {
          const control = ctrl;
      control.value.val.push(value.trim());
         console.log(control.value);
                }

      // Reset the input value
      if (input) {
       input.value = '';
         }
           }

       removeChip(ctrl, val) {
     const idx = ctrl.value.val.findIndex(item => item === val);
     ctrl.value.val.splice(idx, 1);
      }

          addNewChipList() {
        const items = this.myForm.get('names') as FormArray;
        items.push(this.initName(`name${items.length + 1}`));
         }

        save(){
        console.log("FormValues",this.myForm.value)
        }

        }

我正在尝试获取 ['A','B'] 形式的值

Answer 1

扁平化一些数组对于普通 JS 来说是一项微不足道的任务。使用Array.flat ，您可以在一行中执行此操作。

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Syntax

var newArray = arr.flat([depth]);

Parameters

depth Optional

The depth level specifying how deep a nested array structure should be flattened. Defaults to 1.

Return value

A new array with the sub-array elements concatenated into it.

//one level deep
var x = [['A'], ['B']];
console.log(x.flat());
// => ['A', 'B']

//2 levels deep
var y = [[['A', 'B'], ['C']], ['D']];
console.log(y.flat(2));
// => ['A', 'B', 'C', 'D']