Javascript 如何在angular中迭代复选框，使其成为动态的？

我有一个如下的复选框：

代码如下所示：

<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数据放入复选框中，使其成为动态的？

您可以使用*ngFor对文档进行迭代。注意：您可以在文档中添加一个属性，用于绑定复选框的值。在这里，我添加了所选的属性

---

在HTML中，使用ngIf检查数据是否已经到达。如果不是，则不显示div

在内部div中，对文档运行ngFor

<h5>Document List</h5>
<div class="form-check" *ngIf="dataIsPresent">
  <div *ngFor="let document of documents">
   <label class="form-check-label" for="check1">
   <input type="checkbox" class="form-check-input" name="document.docName" value="something"  value="document.docName" >{{document.docName}}
   </label>
  </div>
</div>

---

如果有帮助，请告诉我。

您可以使用*ngFor指令迭代文档并创建复选框

<div *ngFor="let obj of documents">
    <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)]="obj.value" value="checked" >Proforma 
           Invoice
       </label>
    </div>
</div>

---

你能详细说明你的问题吗？我有一个静态复选框。我需要动态地将json数据显示到复选框中，就像如果有10个json数据，那么应该自动有10个复选框一样

<h5>Document List</h5>
<div class="form-check" *ngIf="dataIsPresent">
  <div *ngFor="let document of documents">
   <label class="form-check-label" for="check1">
   <input type="checkbox" class="form-check-input" name="document.docName" value="something"  value="document.docName" >{{document.docName}}
   </label>
  </div>
</div>

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

<div *ngFor="let obj of documents">
    <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)]="obj.value" value="checked" >Proforma 
           Invoice
       </label>
    </div>
</div>