Angular输入框内容实时显示问题：如何改为点击ADD按钮后展示？

问题根源很明确：你把输入框的双向绑定变量inputValue直接传给了app-new-todo的task输入属性，导致用户每输入一个字符，inputValue更新就会立刻同步到子组件，内容自然实时显示。要实现点击ADD按钮才展示任务，核心是把输入临时值和待展示任务值拆分开，只有点击确认时才把临时值同步到展示变量。

以下是调整后的完整代码：

1. 修改TodoComponent组件逻辑 #

新增currentTask变量存储待展示的任务，仅在点击ADD时更新它：

export interface TodoData {
  id: number;
  todo: string;
  done: boolean;
}

export class TodoComponent {
  @Output() todo = new EventEmitter<TodoData>();
  inputValue = '';
  done = false;
  // 用于存储点击ADD后要展示的任务，初始为空
  currentTask = '';

  addTask() {
    // 过滤空内容，避免提交空任务
    if (!this.inputValue.trim()) return;
    
    this.todo.emit({
      id: Math.floor(Math.random() * 1000),
      todo: this.inputValue,
      done: this.done,
    });
    // 点击ADD后，将输入值同步到展示变量
    this.currentTask = this.inputValue;
    // 清空输入框，准备下一次输入
    this.inputValue = '';
  }
}

2. 修改TodoComponent的模板 #

将app-new-todo的绑定从inputValue改为currentTask，还可以加*ngIf避免初始显示空内容：

<section>
  <form (ngSubmit)="addTask()">
    <div>
      <input
        name="todo"
        type="text"
        placeholder="Enter new task"
        [(ngModel)]="inputValue"
      />
      <button>ADD</button>
    </div>
  </form>
  <!-- 仅当currentTask有值时才渲染子组件，绑定展示变量 -->
  <app-new-todo [task]="currentTask" *ngIf="currentTask" />
</section>

3. 其他组件无需修改 #

AppComponent和NewTodoComponent保持原有代码即可，现在用户输入时只有输入框内容变化，点击ADD按钮后，输入值会同步到currentTask，子组件才会展示对应的任务，同时输入框被清空。

内容的提问来源于stack exchange，提问作者Mirza Šabanović