Angular *ngFor循环在两次迭代后中断，我在控制台中看到“表单提交被取消，因为表单未连接”

Angular中的ngFor指令用于在模板中进行循环操作。当使用ngFor循环时，有时可能会遇到循环在两次迭代后中断的情况，并在控制台中看到“表单提交被取消，因为表单未连接”的错误消息。

这个错误通常是由于在循环中使用了表单控件，但没有正确连接表单引起的。在Angular中，如果要使用表单控件，必须将其包裹在一个form元素中，并使用ngForm或FormGroup指令进行连接。

要解决这个问题，可以按照以下步骤进行操作：

1. 确保在循环中使用的表单控件被正确包裹在一个form元素中。例如：

<form #myForm="ngForm">
  <div *ngFor="let item of items">
    <input type="text" name="itemName" [(ngModel)]="item.name" required>
  </div>
</form>

1. 确保在form元素上使用了ngForm或FormGroup指令进行连接。例如：

<form #myForm="ngForm" (ngSubmit)="submitForm(myForm)">
  <!-- 表单内容 -->
</form>

1. 在组件类中，确保有一个submitForm方法来处理表单提交。例如：

submitForm(form: NgForm) {
  if (form.valid) {
    // 处理表单提交逻辑
  }
}

通过以上步骤，可以正确连接表单并解决循环中断的问题。

关于Angular的*ngFor指令和表单处理，你可以参考腾讯云的Angular开发文档，了解更多相关信息：

• Angular开发文档：https://cloud.tencent.com/document/product/1130
• Angular表单处理：https://cloud.tencent.com/document/product/1130/36738

请注意，以上提供的链接是腾讯云的相关文档，仅供参考。