Angular中如何在表单ngSubmit中使用循环索引调用提交函数

Hey there! I totally get the frustration here—you're looping through objects to render multiple forms, and you want each form's submit handler to tie back to your submitForm function while including the loop index u, but Angular's template parser is throwing that annoying Parser Error when you try interpolating the index into the function name. Let's fix this the right way, without ditching your submitForm function.

Best Approach: Pass the Index as a Parameter to submitForm #

Instead of trying to dynamically generate function names (which Angular's template syntax doesn't support directly), just pass the loop index as an argument to your existing submitForm function. This is clean, maintainable, and aligns with Angular's best practices.

Step 1: Update Your Component's submitForm Function

Modify the function to accept an index parameter, then use that index to handle the specific form's logic:

// In your component class
submitForm(formIndex: number) {
  // Access the corresponding object using the index
  const targetObject = yourObjectsArray[formIndex];
  
  // Handle submission logic tailored to this form
  console.log(`Submitting form for object at index ${formIndex}`, targetObject);
  // Add your API calls, validation, etc. here
}

Step 2: Update the Template to Pass the Index

In your *ngFor loop, pass the u index directly to submitForm in the (ngSubmit) binding:

<div *ngFor="let obj of yourObjectsArray; let u = index">
  <form (ngSubmit)="submitForm(u)">
    <!-- Your form fields go here, bound to obj properties -->
    <input type="text" [(ngModel)]="obj.name" name="name-{{u}}">
    <button type="submit">Submit Form {{u + 1}}</button>
  </form>
</div>

Alternative: Use a Function Array (If You Need Separate Logic) #

If you absolutely need distinct functions for each form (e.g., drastically different submission logic), you can create an array of function references in your component, then call them by index in the template:

Step 1: Define the Function Array in Your Component

// In your component class
submitHandlers: (() => void)[] = [];

ngOnInit() {
  // Initialize the array with your specific submit functions
  // Or generate them dynamically based on your objects
  this.submitHandlers = this.yourObjectsArray.map((_, index) => {
    return () => this.handleSpecificFormSubmit(index);
  });
}

handleSpecificFormSubmit(index: number) {
  // Logic for the form at this index
  console.log(`Handling submission for form ${index}`);
}

Step 2: Call the Function from the Array in the Template

<div *ngFor="let obj of yourObjectsArray; let u = index">
  <form (ngSubmit)="submitHandlers[u]()">
    <!-- Form content -->
    <button type="submit">Submit Form {{u}}</button>
  </form>
</div>

Why Avoid Dynamic Function Name Interpolation? #

Angular's template parser expects a valid expression in event bindings like (ngSubmit), not interpolated strings. Trying to use {{u}} in the function name breaks this syntax, which is why you're seeing the error. Passing parameters or using a function array is the intended way to handle dynamic behavior in Angular templates.

内容的提问来源于stack exchange，提问作者amedeiros