Angular2新手求助：如何追加元素及ngFor使用相关技术问题

Hey there! Let's break this down clearly for you since you're new to Angular 2—no confusing jargon, just practical tips and step-by-step code.

If you're using ngFor to render lists, keep these core points in mind:

• Iterate over iterable data: ngFor works with arrays, sets, or any iterable collection. The basic syntax is *ngFor="let item of items" where item is a placeholder for each element, and items is your data source from the component.
• Optimize with trackBy: Always use a trackBy function to help Angular reuse DOM elements instead of re-rendering the entire list. This boosts performance, especially with large datasets. Example:

  *ngFor="let item of items; trackBy: trackById"
  

  Then define the function in your component (more on that later).
• Access index: You can grab the position of each element with let i = index, like:

  *ngFor="let item of items; let i = index"
  

  Use i to show serial numbers or handle position-based logic.
• Handle empty states: Don't forget to add a fallback message when your list is empty. Use *ngIf alongside ngFor:

  <div *ngIf="items.length === 0">No items to display yet!</div>
  <ul *ngIf="items.length > 0">
    <li *ngFor="let item of items">{{item.name}}</li>
  </ul>
  

Adding new elements to your ngFor list is straightforward—here's how to set up the HTML template and component logic:

Step 1: HTML Template Setup #

First, create your list and a simple form to input new items:

<!-- Render the existing list -->
<ul>
  <li *ngFor="let item of items; let i = index; trackBy: trackById">
    {{i + 1}}. {{item.name}}
  </li>
</ul>

<!-- Form to add new items -->
<input 
  type="text" 
  [(ngModel)]="newItemName" 
  placeholder="Enter item name"
>
<button (click)="addItem()">Add Item</button>

• [(ngModel)] creates two-way binding: it syncs the input value with a variable in your component.
• (click) triggers the addItem method in your component when the button is clicked.

Step 2: Component Implementation #

Now write the logic in your component file to manage the data and handle the add action:

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

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ItemListComponent {
  // Initial list of items
  items = [
    { id: 1, name: 'First Item' },
    { id: 2, name: 'Second Item' }
  ];
  
  // Variable bound to the input field
  newItemName = '';
  
  // Counter to generate unique IDs for new items
  nextItemId = 3;

  // Method to add a new item
  addItem() {
    // Don't add empty or whitespace-only items
    if (this.newItemName.trim()) {
      this.items.push({
        id: this.nextItemId++,
        name: this.newItemName.trim()
      });
      // Clear the input field after adding
      this.newItemName = '';
    }
  }

  // trackBy function to optimize ngFor performance
  trackById(index: number, item: any): number {
    return item.id; // Use the unique ID of each item
  }
}

Important Note: Import FormsModule #

Since we're using [(ngModel)], you need to import FormsModule in your root module (like AppModule) to make two-way binding work:

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

import { AppComponent } from './app.component';
import { ItemListComponent } from './item-list/item-list.component';

@NgModule({
  declarations: [
    AppComponent,
    ItemListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

That's it! When you type something in the input and click "Add Item", Angular will automatically detect the change to the items array and update the ngFor list.

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