Angular实现点击按钮将用户输入显示在新Div并换行

嘿，我来帮你搞定Angular里的这个需求！完全不用像jQuery那样直接操作DOM，咱们用Angular最擅长的数据驱动视图方式来实现，既符合框架最佳实践，代码也更简洁易维护。

核心思路很简单：维护一个数组存储用户的每一次输入，然后用*ngFor循环遍历数组，自动渲染出每个输入对应的独立Div——每次新增输入就往数组里加元素，Angular会自动帮我们更新视图，天然实现换行效果。

步骤1：编写组件逻辑（.ts文件） #

我们需要定义两个变量：一个绑定输入框的内容，另一个数组存储所有历史输入；再写一个处理提交点击的方法，把输入内容加入数组后清空输入框。

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

@Component({
  selector: 'app-input-display',
  templateUrl: './input-display.component.html',
  styleUrls: ['./input-display.component.css']
})
export class InputDisplayComponent {
  // 双向绑定输入框的变量
  userInput = '';
  // 存储所有用户输入的数组
  inputHistory: string[] = [];

  handleSubmit() {
    // 过滤空输入
    if (this.userInput.trim()) {
      this.inputHistory.push(this.userInput.trim());
      // 清空输入框，提升用户体验
      this.userInput = '';
    }
  }
}

步骤2：编写模板（.html文件） #

在模板里绑定输入框和按钮事件，再用*ngFor循环渲染每个输入对应的Div，每个Div都是独立的，默认会自动换行（块级元素特性）。

<!-- 输入交互区域 -->
<input type="text" [(ngModel)]="userInput" placeholder="请输入内容...">
<button (click)="handleSubmit()">提交</button>

<!-- 历史输入展示区域：每个输入对应一个独立Div -->
<div class="input-item" *ngFor="let input of inputHistory; let i = index">
  第{{i+1}}条输入：{{input}}
</div>

步骤3：可选样式优化（.css文件） #

可以给每个Div加一点样式，让视觉上更清晰：

.input-item {
  margin: 8px 0;
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f8f9fa;
}

为什么不用jQuery的DOM操作方式？ #

Angular的核心是数据驱动视图，直接操作DOM会绕开Angular的变更检测机制，容易导致视图和数据不同步，还会破坏组件的封装性。用数组+*ngFor的方式，Angular会自动帮我们管理DOM的增删，代码更易维护，也更符合Angular的设计思想。

扩展：给每个Div加删除功能（可选） #

如果需要给每条输入加删除按钮，只需要修改模板和组件逻辑即可：

<div class="input-item" *ngFor="let input of inputHistory; let i = index">
  <span>第{{i+1}}条：{{input}}</span>
  <button (click)="removeInput(i)" class="delete-btn">删除</button>
</div>

然后在组件类里添加删除方法：

removeInput(index: number) {
  this.inputHistory.splice(index, 1);
}

这样就完美实现了每次输入生成独立Div、自动换行的需求啦！

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