javascript - 如何以 Angular 迭代复选框使其变得动态？

Question

我有一个像这样的硬编码复选框:

代码如下:

<h5>Document List</h5>
<div class="form-check">
   <label class="form-check-label" for="check1">
   <input type="checkbox" class="form-check-input" id="check1" name="proformaInvoice" value="something" [(ngModel)]="processAnexOne.proformaInvoice" value="checked" >Proforma Invoice
   </label>
</div>

传入的 Json 数据是:

调用api获取json数据的方法是:

ngOnInit() {
         this.http.get('http://localhost:8080/api/documents')
      .subscribe((data: any[]) => {
        this.documents = data;
        console.log(this.documents);
      })
  }

如何将这些 json 数据装入复选框以使其变为动态？

Answer 1

您可以使用*ngFor来迭代文档。注意:您可以在 document 中添加一个属性，您可以在其中绑定(bind) checkbox 的value。这里我添加了属性selected。

<div class="form-check" *ngFor="let document of documents">
   <label class="form-check-label" for="check1">
   <input type="checkbox" class="form-check-input" 
        id="check1" name="proformaInvoice"
        [value]= "document.docName"
        [(ngModel)]="document.selected"
        >Proforma Invoice
   </label>
</div>