仅使用一个按钮获取倍数的值

Question

我正在尝试同时获得倍数的结果... 目前，我有一个结构可以一个接一个地获得结果，但是我需要发送所有结果...

我的HTML代码：

<form (ngSubmit)="onSubmit(f)" #f="ngForm" *ngFor="let x of selectedValue; index as i">
                    <mat-card > 
                        <mat-card-title class="title-card">
                            <span>{{x.name}}</span>
                        </mat-card-title>
                        <mat-card-content *ngFor="let param of x.modelParameter; index as i">
                            <div class="param-title">
                                <span><b>{{param.name}}</b></span>
                            </div>
                            <div class="set-slider" *ngIf="param.type === 'continuous'"> 
                                <label class="gridSizeValue"><b>{{param.values_arr[0]}}</b></label>
                                <mat-slider #gridsize (change)="updateSetting($event)" class="slider" thumbLabel
                                    tickInterval="1" [displayWith]="formatLabel" min="{{param.values_arr[0]}}"
                                    max="{{param.values_arr[1]}}" aria-label="units" class="form-control" ngModel name="{{param.name}}">
                                </mat-slider>
                                <label class="gridSizeValue"><b>{{param.values_arr[1]}}</b></label>
                            </div>
                            <div class="set-categorical" *ngIf="param.type === 'categorical'">
                                <mat-form-field appearance="outline">
                                    <mat-select 
                                    class="form-control"
                                    ngModel name="option">
                                        <mat-option *ngFor="let op of param.values_arr" [value]="op">
                                            {{op}}
                                        </mat-option>
                                    </mat-select>
                                </mat-form-field>
                            </div> 
                        </mat-card-content>
                    </mat-card>
                    <button mat-raised-button type="submit" class="save-button">Send Models</button>
                </form>

我试图将按钮放在外部方法中，但它不起作用，而且我也很试图通过ngmodel获得值，但它也不起作用。

你有建议吗？

Answer 1

当您在循环中具有模板参考变量时，当您使用此变量时，将“范围”对每个迭代进行“范围”。

您可以使用ViewChildren来获取所有元素具有相同的“模板参考变量”

  @ViewChildren('f') forms:QueryList<NgForm>

一个按钮类型在循环外提交可以调用函数的元素（您可以拨打提交或以其他方式调用）

   <button (click)="submit()">

您的功能提交，

submit()
{
   const isInvalid=this.forms.map(x=>x.valid).find(x=>!x)
   //isInvalid is "undefined" if all are valid
   //          is true if one of the forms is invalid

   if (!isInvalid)
   {
       this.forms.forEach(x=>{
         console.log(x.value)
     })
   }
}

现在我们得到表单。您如何创建数据？

//in array
submit()
{
   ...
   const data=this.forms.map(x=>x.value)    

}
//in an object
submit()
{
   ...
   const obj:any={}
   this.forms.forEach((x,i)=>{
      obj['form'+i]=x.value
   })
}

//if the "name" of the controls are all differents
//using spread operator
submit()
{
   ...
   let obj:any={}
   this.forms.forEach((x,i)=>{
      obj={...obj,...x.value}
   })
}

顺便说一句，您想看一下使用 [（ngmodel）] 使用数组或< a href =“ https://angular.io/guide/reeactive-forms” rel =“ nofollow noreferrer”> reactiveforms