javascript - Modal 中的两种方式绑定(bind)变量 - Angular

Question

我有一个 Bootstrap Modal，我使用 jQuery 初始化它，如下所示:

$('#saleModal').modal('show'); // I know I should use the angular way in initializing the modal but...

在Modal中，我有一个输入，我需要将其绑定(bind)到变量，如下所示:

<input type="text" [(ngModel)]="toBeBoundVariable">

但是绑定(bind)不起作用。我如何告诉 Angular 检查该 Modal 中的绑定(bind)。

我对它没有绑定(bind)的原因的最佳猜测是因为 Modal 是使用 jQuery 初始化的。但是，有没有办法告诉 Angular，“嘿，有一个 Bootstrap Modal 已初始化，有一些您需要注意的绑定(bind)”。

这是代码:

<!--Modal start-->
 <div class="modal" id="saleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel_4"
 aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel_4">New/Edit Sale</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"><i class="ion-ios-close-empty"></i></span>
        </button>
      </div>
  <form>

    <div class="modal-body">

      <label class="col-sm-4 form-control-label">Name</label>
      <div class="col-sm-8 mg-t-10 mg-sm-t-0">
        <input type="text" class="form-control" [(ngModel)]="firstname">
      </div>
      Bound firstname: {{firstname}}
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="submit" class="btn btn-primary"
      >
        <i></i>Save
      </button>
    </div>
  </form>
</div>

.ts 文件

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

declare var $: any;

@Component({
  selector: 'app-purchase',
  templateUrl: './purchase.component.html',
  styleUrls: ['./purchase.component.css']
})
export class PurchaseComponent implements OnInit {

  firstname: string;

  constructor() {


  }

  ngOnInit() {

  }


  showModal() {
   $('#saleModal').modal('show');
  }


}

Answer 1

我认为您错过了在输入字段中添加 name 属性。

  <input type="text" class="form-control" [(ngModel)]="firstname" name="firstName">

希望它能解决您的问题。确保您已在模块中导入 FormsModule。