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

【问题标题】：Dynamic mat-select option in form-array表单数组中的动态垫选择选项
【发布时间】：2019-04-20 08:45:18
【问题描述】：

我有一个动态表单组。

mat-select 都是动态的。当我按下添加按钮时，它会添加另一个具有相同元素和相同动态字段的表单数组。

在表单组数组的第一个索引中，当我更改 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 中使用具有相同值的不同对象变量吗？

【问题讨论】：

分享你如何形成FormGroup和FormControl多条记录的代码。
ngOnInit() { const id = +this.route.snapshot.paramMap.get('id'); this.form = this._fb.group({ name:this.applicantName, jobList:this._fb.array([this.getJobModel()]) }); this.getApplicant(id); this.getCategories(); }; addField(){ const control = this.form.controls['jobList']; control.push(this.getJobModel()); } getItemsModel(){ return this._fb.group({ categories:[''], jobs:[''] }); }
将此代码更新为问题和jobList迭代的更多html代码。
我的 html 中缺少剩下的 formarray 代码。他们是让 *ngFor 中的作业变量成为动态变量还是我想在变量名中连接索引？

标签： angular dynamic angular6 formarray

【解决方案1】：

现在一切都好。我只是将作业放入数组中。

jobs:any[]=[];

这样声明。然后 fetch 使用索引作为动态数组的参数。

【讨论】：