表单数组中的动态垫选择选项

时间:2018-11-17 09:57:50

标签: angular dynamic angular6 formarray

我有一个动态表单组。

sample ui image

两个垫选都是动态的。当我按下添加按钮时,它将添加具有相同元素和相同动态字段的表单的另一个数组。

在表单组的数组的第一个索引中,当我更改CATEGORY列中的mat-select值时,它将根据从数据库中获取的值填充JOB列。

我的问题是,当我添加另一个表单组数组时,mat-select仍然是动态的,但是当我更改第二行CATEGORY列中mat-select的值时,它将更改JOBS列中的所有行基于第一列中的提取数据。

HTML文件

<mat-form-field>
  <mat-select formControlName="categories" 
          (selectionChange)="getJobs($event.value)">
              <mat-option *ngFor="let cat of categories" 
                 [value]="cat.jobCatID">
                {{cat.name}}
              </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field>
   <mat-select formControlName="jobs">
          <mat-option *ngFor="let job of jobs" [value]="job.jobID">
            {{ job.name}}
          </mat-option>
   </mat-select>
 </mat-form-field>

TS文件

getJobs(id){
return this.category.getJob(id).subscribe(
  data => {
      if(data.success){
        this.jobs=data.jobsCat.jobs
      }
  }
)}

无论如何,我可以使 jobs 变量动态化,以使每个JOBS mat-select的ngFor中的不同对象具有相同的值吗?

1 个答案:

答案 0 :(得分:0)

一切都很好。我只是把工作分成数组。

jobs:any[]=[];

这样宣布。然后,fetch将索引用作动态数组的参数。