更新 formArray 上的值答案

【问题标题】：Update value on formArray更新 formArray 上的值
【发布时间】：2019-02-23 06:12:43
【问题描述】：

所以我有这个设置：

型号：

export class MapDetailModel{
    id: number;
    lat: number;
    lon: number;
    alt: number;
    long: number;
    angle: number;
    distance?: number;
    pendenza?: number;
}

HTML：

<div class="element-list">
        <form [formGroup]="survey" novalidate (ngSubmit)="onSubmit(survey)" *ngIf="items">
            <div formArrayName="sections">
                <div class="single-item" *ngFor="let section of getSections(survey); let i = index">
                    <div  [formGroupName]="i">
                        Lat: <input type="text" formControlName="lat" class="frm-txt">
                        Lon: <input type="text" formControlName="lon" class="frm-txt">
                        Long: <input type="text" formControlName="long" class="frm-txt">
                        Angle: <input type="text" formControlName="angle" class="frm-txt">
                        a: {{i.angle}}
                        <a (click)="updateData(i)">Update data</a>
                    </div>
                </div>
            </div>
        </form>
    </div>

ts：

@Component({
    //moduleId: module.id,
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'my-info-bar',
    templateUrl: 'map-info-bar.component.html',
    styleUrls: ['map-info-bar.component.css'],
    providers: [],
})
export class MapInfoBarComponent implements OnInit, OnDestroy
{
  zoomLevels: any[];
  points: MapDetailModel[] = [];
  isAlive = true;
  survey: FormGroup;
  items = false;

  constructor(
    private mapService: MapService,
    private fb: FormBuilder,
    private  changeDetectorRef: ChangeDetectorRef
    ){}

  ngOnInit() {

    this.mapService.singlePointChanged
    .takeWhile(() => this.isAlive)
    .subscribe( evt => {
      if(!!evt && !!this.survey.value.sections[0]){
        let elem;
        this.points.forEach(el => {
          if(el.id == evt.id){
            el = evt;
            elem = el;
          }
        });
        (<FormArray>this.survey.get('sections')).at(elem.id).patchValue(elem);
         this.changeDetectorRef.detectChanges();
      }
    })

    this.mapService.pointsChanged
    .takeWhile(() => this.isAlive)
    .subscribe( evt => {
      if(!!evt){
        this.points = evt;

        if(!this.items){
          this.survey = this.fb.group({
            sections: this.fb.array([
              this.initSection(0),
            ]),
          });
          this.items = true;
        } else {
          this.addSection(this.points.length - 1);
        }
      }
    });
  }

  initSection(idx: number) {
    return this.fb.group({
      lat: [this.points[idx].lat],
      lon: [this.points[idx].lon],
      long: [this.points[idx].long],
      angle: [this.points[idx].angle]
    });
  }

  addSection(idx: number) {
    const control = <FormArray>this.survey.get('sections');
    control.push(this.initSection(idx));
  }

  getSections(form) {
    return form.controls.sections.controls;
  }

  updateData(index: number){
    const values = this.survey.value.sections[index] as MapDetailModel;
    this.mapService.setChangePoint(values);
  }

  ngOnDestroy(): void {
    this.isAlive = false;
  }
}

现在一切正常。我正在正确显示数据，我很高兴。问题是每当执行此行时：

(<FormArray>this.survey.get('sections')).at(elem.id).patchValue(elem);

它给了我这个错误：

ERROR TypeError: Cannot read property 'patchValue' of undefined

但它的结构是这样的：

那么如何更新位置elem.id 的formArray 值？我不明白的是，如果 .get 应该找到 'section' 数据，怎么可能是未定义的？

谢谢。

【问题讨论】：

标签： angular typescript angular2-forms angular-reactive-forms

【解决方案1】：

TL;DR - 这是因为您在初始化表单之前调用了此操作。

您当前正在做什么 - 仅当 pointsChanged 触发时才初始化您的表单。在此之前，表单将保持未定义。

您应该考虑做什么 - 在 ngOnInit 上初始化您的表单，或者在您像这样声明您的表单时立即初始化您的表单：

survey: FormGroup = this.fb.group({
  sections: this.fb.array([]),
});

当pointsChanged 被触发时，考虑将patchValue 与您收到的数据一起使用。

【讨论】：