在Angular 5中动态添加文本框及文本/芯片组件的实现需求

Got it, let's build this step by step for Angular 5! I've put together a complete implementation that checks all your boxes:

This handles the data state, adding/removing items, and mode switching:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Stores all user input text items
  textItems: string[] = ['']; // Start with one empty input
  isEditMode: boolean = true; // Default to edit view

  // Add a new text box (capped at 10)
  addTextItem() {
    if (this.textItems.length < 10) {
      this.textItems.push('');
    }
  }

  // Remove a specific text item
  removeTextItem(index: number) {
    this.textItems.splice(index, 1);
    // Ensure we always have at least one input in edit mode
    if (this.textItems.length === 0 && this.isEditMode) {
      this.textItems.push('');
    }
  }

  // Save inputs and switch to view mode
  saveItems() {
    // Optional: Filter out empty strings to clean up the saved list
    this.textItems = this.textItems.filter(item => item.trim() !== '');
    this.isEditMode = false;
  }

  // Switch back to edit mode from view mode
  switchToEdit() {
    this.isEditMode = true;
    // Add an empty input if there are no items to edit
    if (this.textItems.length === 0) {
      this.textItems.push('');
    }
  }
}

This renders the edit and view interfaces with dynamic inputs and controls:

<div class="app-container">
  <!-- Edit Mode: Add/remove text boxes and input content -->
  <div *ngIf="isEditMode" class="edit-section">
    <h3>Add Text (Max 10 Items)</h3>
    <div *ngFor="let item of textItems; let i = index" class="input-row">
      <input 
        type="text" 
        [(ngModel)]="textItems[i]"
        placeholder="Type something here..."
        class="text-input"
      >
      <button 
        class="remove-btn" 
        (click)="removeTextItem(i)"
        [disabled]="textItems.length === 1"
      >
        X
      </button>
    </div>

    <div class="action-buttons">
      <button 
        class="add-btn" 
        (click)="addTextItem()"
        [disabled]="textItems.length >= 10"
      >
        Add New Box
      </button>
      <button class="save-btn" (click)="saveItems()">Save</button>
    </div>
  </div>

  <!-- View Mode: Display saved items with remove option -->
  <div *ngIf="!isEditMode" class="view-section">
    <h3>Saved Text Items</h3>
    <div *ngIf="textItems.length === 0" class="empty-state">
      No items saved yet.
    </div>
    <div *ngFor="let item of textItems; let i = index" class="saved-item">
      <span>{{ item }}</span>
      <button class="remove-btn" (click)="removeTextItem(i)">X</button>
    </div>

    <button class="edit-btn" (click)="switchToEdit()">Edit Items</button>
  </div>
</div>

Make the interface clean and user-friendly:

.app-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
  font-family: Arial, sans-serif;
}

.edit-section, .view-section {
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 8px;
}

.input-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.text-input {
  flex: 1;
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.remove-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 0 1rem;
}

.remove-btn:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.add-btn, .save-btn, .edit-btn {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-btn {
  background-color: #6c757d;
  color: white;
}

.save-btn {
  background-color: #007bff;
  color: white;
}

.edit-btn {
  background-color: #28a745;
  color: white;
  margin-top: 1rem;
}

.saved-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.empty-state {
  color: #666;
  padding: 1rem;
  text-align: center;
  border: 1px dashed #ccc;
  border-radius: 4px;
}

Quick Notes on How It Works: #

• Dynamic Inputs: We use *ngFor to loop over the textItems array, creating an input for each entry. The addTextItem() method stops adding once we hit 10 items.
• Two-Way Binding: [(ngModel)] keeps input values synced with the component's textItems array in real time.
• Mode Switching: The isEditMode boolean toggles between the edit and view interfaces. Saving filters out empty entries (you can remove this if you want to keep empty inputs).
• Remove Protection: We disable the "X" button for the last input in edit mode so users never end up with no way to add new text.

内容的提问来源于stack exchange，提问作者S. K.