Angular 5中(click)事件绑定失效，addTrip方法无法触发求助

第一个关键原因：未导入FormsModule #

你在模板里用了[(ngModel)]双向绑定，但如果你的组件所属的Angular模块（比如AppModule）没导入FormsModule的话，不仅双向绑定会失效，还可能导致整个表单相关的绑定逻辑出问题，连(click)事件都没法正常关联到组件里的addTrip方法。这是很多Angular新手容易踩的坑！

第二个关键原因：使用submit按钮时未处理默认行为 #

当你用<input type="submit">或者<button type="submit">的时候，浏览器会触发默认的表单提交动作——也就是整页刷新，这会直接打断Angular的事件处理流程，你的addTrip方法根本没机会执行。而且你之前没用到Angular表单的ngSubmit指令，直接给按钮绑(click)，这也不是模板驱动表单的正确用法。

具体修复步骤 #

1. 导入FormsModule
   打开你的模块文件（比如app.module.ts），导入FormsModule并加到imports数组里：

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 { }

2. 优化表单提交逻辑
   推荐用Angular的ngSubmit指令来绑定提交方法，它会自动帮你阻止浏览器的默认提交行为，修改后的模板代码如下：

<form (ngSubmit)="addTrip()">
  <div class="form-group">
    <label class="control-label">Trip name</label>
    <input type="text" [(ngModel)]="newTrip.trip_name" name="c_trip_name" id="c_entity_id">
  </div>
  <div class="form-group">
    <button type="submit">Add trip</button>
  </div>
</form>

这样改完之后，点击按钮既不会整页刷新，addTrip方法也能正常触发了。

如果还是想用type="button"的按钮，只要确保模块已经导入了FormsModule，原来的(click)="addTrip()"应该就能正常工作了——之前失效大概率就是因为缺了这个模块导致的模板绑定异常。

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