角 - 动态形式 - 访问场值

Question

更改特定字段的值后，我需要用API响应填充一些表单字段。我的问题是我不知道如何聆听这种变化，或者如何访问其价值以发送适当的请求主体。这总是导致有关字段的不确定值。该表格是动态生成的，因此没有任何实际的HTML。

以下是我认为对此行为负责的编码文件。

配置point-api.service.ts

import { Observable, Subscription } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import * as Configuration from '../../../../../../../configuration/config';
import { IConfigurePoint } from '../components/configure-point.interface';
import { IPointInfo } from '../../../check/point/components/point.interface';
import { map } from 'rxjs/operators';
import { toBool } from 'src/shared/toBool';
import { ConfigurePointStateService } from '../state/configure-point-state.service';
import { FieldConfig } from 'src/shared/components/dynamic-form/field.interface';
import { fields } from '../components/configure-point.fields';

const config = Configuration;

@Injectable()
export class ConfigurePointApiService {
  configurePointStateSub: Subscription;
  fields: FieldConfig[] = fields;
  
  constructor(
    private http: HttpClient,
    private configurePointStateService: ConfigurePointStateService
  ) {}

  getPoints(): Observable<IConfigurePoint> {
    return this.http.post<IPointInfo>(`${config.apiV1Url}/${config.getPointConfig}`, {
      type: 10,
      panel: 0,
      zone: 0,
      loop: 1,
      index: 1,
      size: 0,
      extra: 0,
      string1: '',
      string2: '',
      string3: '',
      string4: '',
    })
    .pipe(map((response: IPointInfo) => {
      
      this.configurePointStateService.setConfigurePointData(response);
      return {
        loop: Number(response.loop),
        address: Number(response.address),
        name: response.name,
        zone: Number(response.zone),
        point_type: Number(response.point_type),
        luminary_model: Number(response.luminary_model),
        registered: toBool(response.registered)
      } as IConfigurePoint;
    }));
  }

  getPoint(res: IPointInfo): Observable<IConfigurePoint> {
    return this.http.post<IPointInfo>(`${config.apiV1Url}/${config.getPointConfig}`, {
      type: 10,
      panel: 0,
      zone: 0,
      loop: res.loop,
      index: res.address,
      size: 0,
      extra: 0,
      string1: '',
      string2: '',
      string3: '',
      string4: '',
    })
    .pipe(map((res: IPointInfo) => {
      return {
        loop: Number(res.loop),
        address: Number(res.address),
        name: res.name,
        zone: Number(res.zone),
        point_type: Number(res.point_type),
        luminary_model: Number(res.luminary_model),
        registered: toBool(res.registered)
      } as IConfigurePoint;
    }));
  }

  setConfigurePoint(req: IConfigurePoint): Observable<IPointInfo> {
    return this.http.post<IPointInfo>(`${config.apiV1Url}/${config.setPointConfig}`, {
      panel: 0,
      loop: Number(req.loop),
      address: Number(req.address),
      name: req.name,
      zone: Number(req.zone),
      point_type: Number(req.point_type),
      luminary_model: Number(req.luminary_model),
      registered: req.registered === true ? 1 : 0,
    });
  }
}

getPoints（）是在加载时初始化的，并且使用API​​响应正确填充了表单。

getpoint（arg）在（更改）上调用，并带有新请求，以最终用新响应重新填充表单。

setConfigurepoint（arg）在（提交）上调用以注册新设备。

我想强调的是，getPoints（）和setConfigurepoint（arg）正在按照应有的方式工作。

配置point-container.component.ts

import { FieldConfig } from 'src/shared/components/dynamic-form/field.interface';
import { IPointInfo } from '../../../check/point/components/point.interface';
import { IConfigurePoint } from '../components/configure-point.interface';
import { ConfigurePointFacadeService } from '../configure-point-facade.service';
import { fields } from '../components/configure-point.fields';
import { Subscription } from 'rxjs';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'configure-point-container',
  templateUrl: 'configure-point-container.component.html',
})
export class ConfigurePointContainerComponent implements OnInit, OnDestroy {
  configurePoints: IConfigurePoint;
  configurePointsSub: Subscription;
  point: IConfigurePoint;
  configurePointDataSub: Subscription;
  setConfigurePointSub: Subscription;
  fields: FieldConfig[] = fields;  
  req: IPointInfo;
  
  constructor(private ConfigurePointFacade: ConfigurePointFacadeService) {}

  ngOnInit(): void {
    this.configurePointsSubscribe();
  }
  
  configurePointsSubscribe() {
    this.configurePointsSub = 
      this.ConfigurePointFacade.getConfigurePoints().subscribe(
        (configurePoints: IConfigurePoint) => {
          this.configurePoints = configurePoints;
          console.log(this.configurePoints);
        }
      );
  }

  getPointData(res: IPointInfo) {
    this.configurePointDataSub = this.ConfigurePointFacade.getPoint(res)
      .subscribe((data: IConfigurePoint) => {
        this.point = data;
        console.log(this.point); 
    });
  }

  setConfigurePoint(req: IConfigurePoint): void {
    this.setConfigurePointSub =
      this.ConfigurePointFacade.setConfigurePoint(req).subscribe();
  }

  ngOnDestroy() {
    if (this.configurePointsSub) {
      this.configurePointsSub.unsubscribe();
    }
    if (this.configurePointDataSub) {
      this.configurePointDataSub.unsubscribe();
    }
    if (this.setConfigurePointSub) {
      this.setConfigurePointSub.unsubscribe();
    }
  }
}

指出所有接口已被检查。在API服务文件中，关于价值更改，尝试 post index 的值（ res.address ）应等于地址字段的值，并来自不同的接口。

您对如何解决这个问题有任何建议吗？谢谢。