Angular2 :单击按钮将文本框条目添加到范围中

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: string[] = [];
  newItem: string = '';

  addItem() {
    if (this.newItem.trim() !== '') {
      this.items.push(this.newItem);
      this.newItem = '';
    }
  }
}

<!-- app.component.html -->
<div>
  <input type="text" [(ngModel)]="newItem" placeholder="Enter item">
  <button (click)="addItem()">Add</button>
</div>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

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