Question

我已经使用本教程dynamic checkbox list,创建了动态复选框，现在我需要使用API请求来实现动态复选框，这是我所做的，

inquiry-response.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);
    });
  }

当我想使用RxJS运算符Type 'void' is not assignable to type 'any[]'激发异步请求时，出现错误状态of()。在private addCheckboxes()上也遇到问题。需要建议和帮助，以解决问题。

Answer 1

更新

of()是从值中生成Observable的方法。因此，您不需要它。

只需摆脱它，然后将返回值设置为getSummon()并订阅它即可。

在构造函数中：

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

在getSummon（）中：

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

从Response API获取复选框表单组

1 个答案: