Angular项目中Navbar组件双向数据绑定失效问题求助

核心问题排查与修复 #

你的代码已导入FormsModule，但双向绑定失效的最常见原因是：在非<form>标签内使用[(ngModel)]时，未给输入框指定name属性，或未设置独立模式。

修复方案二选一：

1. 给输入框添加name属性

<input type="search" class="form-control" placeholder="Type to search" 
       name="navbarSearchInput" [(ngModel)]="navbarSearchKey"/>

2. 启用ngModel独立模式

<input type="search" class="form-control" placeholder="Type to search" 
       [(ngModel)]="navbarSearchKey" [ngModelOptions]="{standalone: true}"/>

额外排查点 #

• 确认组件类中的navbarSearchKey未被其他逻辑意外重置或覆盖
• 打开浏览器控制台，检查是否存在FormsModule相关的加载报错（比如拼写错误、模块未正确导入）

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