时间戳

首页 > 解决方案 > 从响应 API 获取复选框表单组

angular - 从响应 API 获取复选框表单组

问题描述

我已经使用本教程动态复选框列表创建了动态复选框，现在我需要使用 API 请求实现动态复选框，这就是我所做的，

查询-响应.ts

interface Item {
  offenceType4: string;
  permSpeed: string;
  actSpeed: string;
  itemAttributes: ItemAttributes;
  offenceLoc: string;
  itemNo: string;
  summonDate: string;
  distCode: string;
  summonType: string;
  hbtlOffndr: string;
  itemAmount: number;
  itemAttributesCount: number;
  summonAmt: string;
  offenceType1: string;
  offenceCode1: string;
  offenceType2: string;
  offenceCode2: string;
  offenceType3: string;
  category: string;
  offenceCode3: string;
  offenceCode4: string;
  respCode: string;
}

interface ItemAttributes {
  attribute5: string;
  attribute4: string;
  attribute7: string;
  attribute6: string;
  attribute1: string;
  attribute3: string;
  attribute2: string;

}
  interface RootObject {
  items: Item[];
  status: Status;
  additionalProperties: AdditionalProperties;
  metadata: Metadata;
}

export class InquiryResponseMultiselectComponent implements OnInit {
  form: FormGroup;
  summons = [];
  data: any[];

  constructor(
    private formBuilder: FormBuilder,
    private modalService: ModalService,
    private inquiryService: InquiryService
  ) {
    this.form = this.formBuilder.group({
      summons: new FormArray([], minSelectedCheckboxes(1)),
    });

    of(this.getSummon()).subscribe(summons => {
      this.summons = summons;
      this.addCheckboxes();
    });
  }

  ngOnInit() {
   this.getSummon();
  }

  getSummon() {
    this.inquiryService.getData().pipe(map((item: RootObject) => item.items))
      .subscribe(item => {
        this.data = item;
      });
  }

  private addCheckboxes() {
    this.summons.map(i => {
      const control = new FormControl();
      (this.form.controls.summons as FormArray).push(control);
    });
  }

Type 'void' is not assignable to type 'any[]'当我想通过使用 RxJS 操作符来激发异步请求时，我得到了错误状态of()。上的时候也有问题private addCheckboxes()。需要建议和帮助如何解决问题。

标签： angulartypescriptcheckboxrxjsobservable

解决方案

更新

of()是Observable从值生成的方法。所以你不需要它。

只需摆脱它，并设置一个返回值getSummon()并订阅它。

在构造函数中：

    this.getSummon().subscribe(summons => {
      this.summons = summons;
      this.addCheckboxes();
    });

在 getSummon() 中：

  getSummon() {
    return this.inquiryService.getData().pipe(map((item: RootObject) => item.items)) ;
  }

推荐阅读