Javascript 使用服务器中的数据修补Formarray值时出现问题

我有一个角度表单，用户填写表单并通过复选框选择多本书，然后将数据发送到服务器。用户可以稍后再次编辑表单。当用户想要编辑表单时，必须向用户显示该表单，该表单中预先填写了用户以前提交的数据

我现在遇到的问题是如何用用户已经提交的值预先填充复选框。有五个复选框，用户可以选择两个。当他以后想要编辑数据时，我想预先选中他之前选中的复选框

当前问题 当我运行代码时，复选框会在一秒钟内出现并立即消失。正因为如此，我无法看到它们是否被检查过

下面是我的代码的一部分，以便您能够理解这个问题

//模型接口

export interface BooksModel {
  books?: Array<any>;
}


export class AdviesHandicapComponent implements OnInit {
   private sub: any;
   service: DataService;
   books = new FormArray([]);
   booksModel: BooksModel;
   booksForm: FormGroup;

 booksOptions = [
   {id: 1, book: 'Biology'},
    {id: 2, book: 'Physics'},
    {id: 3, book: 'Chemistry'},
    {id: 4, book: 'Maths'},
    {id: 6, book: 'None of the above'}
  ];

   constructor(private fb: FormBuilder){}

    ngOnInit(): void {
       this.service = new DataService();

       this.sub = this.route.queryParams.subscribe(params => {
       const tok = params['tok'];
       if (tok) {
         const results = this.service.getBooks();
         booksModel = results.reg;
         patchBooksForm();
       }
    });

   const booksFormControls = this.booksOptions.map(book => new FormControl(false));
    this.books = new FormArray(booksFormControls);
    this.booksForm = this.fb.group({
      books: this.books,
    });
   }

   patchBooks(ind: string[]) {
    for (let i = 0; i < this.books.controls.length; i++) {
      for (const d of ind) {
        if (this.booksOptions[i].book === d) {
          this.books.controls[i].patchValue(true);
        }
      }
    }
  }

patchBooksForm(): void {
    patchBooks(this.booksModel.books); // I call this method here to patch the formarray values
    this.booksForm.patchValue({
    books: this.books.controls
    });
  }

}

---

根据您的代码，未触及的表单如下所示：

{
“书籍”：[
假,，
假,，
假,，
假,，
假的
]
}

为了在打补丁时实现同样的效果，您现在遇到了问题，您要打两次补丁，第一次是在

patchBooks（）

中使用

for

循环中的正确值，第二次是使用

patchBooksForm（）

中的books控件打补丁。您应该删除这些行：

//删除
//this.booksForm.patchValue({
//图书：this.books.controls
// });

只是一句话，形式数组中没有任何标识符有意义吗，现在只有一堆假和真，但这当然取决于你：）还有另一句话，没有关系，你应该在构造函数中注入你的服务，而不是调用：

this.service=new DataService（）

export class DataService {
     getBooks() {
       return  {"reg":{"books":["Biology","Maths"]}};
        }
}