Angular 5中ng-template对话框内ngModel无法绑定至控制器问题

哈哈，这个坑我踩过！你遇到的问题本质是模态框的上下文和当前组件上下文不共享导致的：当你用modalService.show()展示ng-template时，模板会被挂载到根组件的上下文环境里，而不是你当前控制器的上下文，所以模板里的[(ngModel)]="ar"根本没绑定到你组件的ar属性上，自然this.ar一直是undefined。

下面给你两种最常用的解决方案：

方案一：通过模态框上下文传递绑定对象 #

因为基本类型（比如字符串、数字）是值传递，直接传ar无法同步修改，所以我们用对象包裹属性，通过引用传递来实现双向绑定：

组件代码 #

import { Component, TemplateRef } from '@angular/core';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 用对象包裹表单字段，保证引用传递
  formData = { ar: '' };
  modalRef: NgbModalRef;

  constructor(private modalService: NgbModal) {}

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, {
      // 把formData传入模态框的初始上下文
      initialState: { formData: this.formData }
    });
  }

  // 表单提交方法
  onSubmit() {
    console.log('输入的值:', this.formData.ar); // 现在能正常拿到值了！
    this.modalRef.close();
  }
}

模板代码 #

<!-- 模态框模板，通过let-formData="formData"接收上下文参数 -->
<ng-template #modalTemplate let-formData="formData">
  <div class="modal-header">
    <h4 class="modal-title">表单模态框</h4>
    <button type="button" class="close" (click)="modalRef.dismiss('关闭')">&times;</button>
  </div>
  <div class="modal-body">
    <form>
      <!-- 绑定到上下文对象的ar属性 -->
      <input type="text" name="ar" id="ar" class="form-control" [(ngModel)]="formData.ar" required>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="onSubmit()">提交</button>
  </div>
</ng-template>

<!-- 触发按钮 -->
<button class="btn btn-primary" (click)="openModal(modalTemplate)">打开模态框</button>

方案二：改用组件式模态框（推荐复杂场景） #

如果你的表单逻辑复杂或者需要复用，更推荐创建独立的模态框组件，这样组件有自己的上下文，绑定逻辑更清晰：

1. 创建模态框组件 #

import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-modal-form',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">表单模态框</h4>
      <button type="button" class="close" (click)="activeModal.dismiss('关闭')">&times;</button>
    </div>
    <div class="modal-body">
      <form>
        <input type="text" name="ar" id="ar" class="form-control" [(ngModel)]="ar" required>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="submit()">提交</button>
    </div>
  `
})
export class ModalFormComponent {
  ar: string = ''; // 组件自身的属性，绑定无问题

  constructor(public activeModal: NgbActiveModal) {}

  submit() {
    // 关闭模态框并把值传回父组件
    this.activeModal.close(this.ar);
  }
}

2. 父组件调用模态框 #

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalFormComponent } from './modal-form.component';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private modalService: NgbModal) {}

  openModal() {
    const modalRef = this.modalService.open(ModalFormComponent);
    // 监听模态框关闭事件，接收返回值
    modalRef.result.then((result) => {
      console.log('模态框返回的值:', result);
    }, (reason) => {
      console.log('模态框关闭原因:', reason);
    });
  }
}

3. 父组件模板 #

<button class="btn btn-primary" (click)="openModal()">打开模态框</button>

总结 #

• 简单表单用方案一，快速解决绑定问题；
• 复杂/复用表单用方案二，代码结构更清晰，维护性更高。

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