求助：如何在Angular中为所有字段区块添加删除按钮

Let's walk through how to update your Angular app so every field block gets its own delete button, not just the last one. Here's a step-by-step implementation:

Step 1: Update Component Logic #

First, we'll add methods to delete individual items from each of your arrays (headline, bodyText, openingHours) in your component class. We'll also keep the existing add methods to create new fields.

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // Initialize your form data with the provided JSON structure
  formData = {
    headline: [
      { headlineText: "example en headline", language: "en" },
      { headlineText: "example de headline", language: "de" }
    ],
    bodyText: [
      { bodyText: "example en bodytext", language: "en" },
      { bodyText: "example de bodytext", language: "de" }
    ],
    location: {
      name: "mkontheway",
      openingHours: [
        { day: "Mon-frd", timing: "10.00PM-9AM" }
      ]
    }
  };

  // Add new headline field
  addHeadline() {
    this.formData.headline.push({ headlineText: '', language: '' });
  }

  // Delete specific headline by index
  deleteHeadline(index: number) {
    this.formData.headline.splice(index, 1);
  }

  // Add new body text field
  addBodyText() {
    this.formData.bodyText.push({ bodyText: '', language: '' });
  }

  // Delete specific body text by index
  deleteBodyText(index: number) {
    this.formData.bodyText.splice(index, 1);
  }

  // Add new opening hour field
  addOpeningHour() {
    this.formData.location.openingHours.push({ day: '', timing: '' });
  }

  // Delete specific opening hour by index
  deleteOpeningHour(index: number) {
    this.formData.location.openingHours.splice(index, 1);
  }
}

Step 2: Modify the Template #

Next, update your component's HTML template to loop through each array with *ngFor, and attach a delete button to every field block. We'll use the index variable from *ngFor to target the exact item to delete.

<!-- Headline Section -->
<h3>Headlines</h3>
<div *ngFor="let headline of formData.headline; let i = index" class="field-block">
  <input [(ngModel)]="headline.headlineText" placeholder="Headline Text">
  <input [(ngModel)]="headline.language" placeholder="Language">
  <button (click)="deleteHeadline(i)">Delete</button>
</div>
<button (click)="addHeadline()">Add Headline</button>

<!-- Body Text Section -->
<h3>Body Texts</h3>
<div *ngFor="let body of formData.bodyText; let i = index" class="field-block">
  <input [(ngModel)]="body.bodyText" placeholder="Body Text">
  <input [(ngModel)]="body.language" placeholder="Language">
  <button (click)="deleteBodyText(i)">Delete</button>
</div>
<button (click)="addBodyText()">Add Body Text</button>

<!-- Location & Opening Hours Section -->
<h3>Location</h3>
<input [(ngModel)]="formData.location.name" placeholder="Location Name">

<h4>Opening Hours</h4>
<div *ngFor="let hour of formData.location.openingHours; let i = index" class="field-block">
  <input [(ngModel)]="hour.day" placeholder="Day">
  <input [(ngModel)]="hour.timing" placeholder="Timing">
  <button (click)="deleteOpeningHour(i)">Delete</button>
</div>
<button (click)="addOpeningHour()">Add Opening Hour</button>

Step 3: Ensure FormsModule is Imported #

To use [(ngModel)] for two-way data binding, you need to import FormsModule in your app module (or the module containing your component):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Import FormsModule

import { YourComponent } from './your-component.component';

@NgModule({
  declarations: [YourComponent],
  imports: [BrowserModule, FormsModule], // Add FormsModule here
  bootstrap: [YourComponent]
})
export class AppModule { }

How It Works #

• The *ngFor directive iterates over each item in your arrays, creating a field block for every entry.
• The index variable from *ngFor lets us pass the exact position of the item to the delete method.
• The splice() method removes the item at the specified index from the array, which triggers Angular's change detection to update the template immediately.

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