javascript - 使用来自 Angular 中服务器的数据修补 FormArrays 值的问题

Question

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

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

当前问题

当我运行我的代码时，复选框会在一秒钟内出现并立即消失。因此，我无法查看它们是否经过检查。

以下是我的代码的精简版，以便您理解问题。

//模型接口(interface)

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
    });
  }

}

来自服务器的数据

用户可能选择了以下书籍。所以当他稍后回来时，我希望在他开始编辑表格之前选择这些书。**

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

Answer 1

根据您的代码，您未修改的表单如下所示:

{
  "books": [
    false,
    false,
    false,
    false,
    false
  ]
}

为了在打补丁时达到同样的效果，你现在遇到了问题，你打了两次补丁，第一次在 patchBooks() 的 for 循环中使用正确的值，第二次用 patchBooksForm() 中的书籍控件修补它。您应该删除这些行:

// remove
// this.booksForm.patchValue({
//   books: this.books.controls
// });

STACKBLITZ

只是一个评论，在 formarray 中没有任何标识符是否有意义，现在只有一堆假和真，但这当然取决于你 :) 另外一个不相关的评论，你应该 < strong>在构造函数中注入(inject)您的服务，而不是调用:this.service = new DataService();。