标签: ng-modal

我有一个带有按钮的Angular2应用程序,可以为我的贷款添加另一笔贷款.我的*ngFor也非常简单:

    <div *ngFor="let loan of myLoans">
      <label>{{loan.name}}</label>
      <input type="text" name="loan.name" [(ngModel)]="loan.amount">
    </div>

myLoans是一个带有name和amount参数的Loan对象数组.我的按钮也很简单.

<button id="addLoan" type="button" (click)="addLoan()">Legg til lån</button>

addLoan()函数:

addLoan(): void{
    var newLoan = new Loan();
    this.myLoans.push(newLoan);
}

我的问题是,当我在列表中添加新贷款时,我在其他贷款的输入字段中的任何值都会回到0或我在贷款对象的构造函数中设置的任何值.

加载应用程序会显示此图片

键入数字时,ngModel正在工作

按下"Leggtillån"按钮后,将重置第一个输入的值

如果我尝试输入另一个数字,ngModel仍在为第一个输入工作

任何人都知道这里发生了什么？

假设我有这样的模态模板:

<div class="modal-header">
  <h3 [innerHtml]="header"></h3>
</div>

<div class="modal-body">
  <ng-content></ng-content>
</div>

<div class="modal-footer">
</div>

我从另一个组件调用这个模态,所以:

    const modalRef = this.modalService.open(MobileDropdownModalComponent, {
      keyboard: false,
      backdrop: 'static'
    });

    modalRef.componentInstance.header = this.text;

我怎么能用NgbModal绑定等放入html？成ng-content

我需要模拟NgbModal以角度进行一些单元测试,但我不知道如何做到这一点.这是我的功能:

    openModal(deviceID: string, productID: string){
        const modalRef =  this.modalService.open(ProductModal)
        modalRef.componentInstance.content = {
            deviceId: deviceID,
            productId: productID
        } 
        modalRef.componentInstance.toEmit.subscribe(($e) => {
            if ($e === true) this.reloadList();
        });
    }

我应该做些什么？

我们刚刚将应用程序升级到了angular 7，我们注意到所有ngBootstrap模态现在都默认自动关闭按钮，如下图所示。

这是我的代码：

html模态代码：

<form [formGroup]="storeForm" novalidate>
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Modal Test</h4>
            <button type="button" class="close" aria-label="Close" 
               (click)="activeModal.dismiss('Cross click')">
               <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <h4>Todo</h4>
        </div>
        <div class="modal-footer">
            <button role="button" type="submit" class="btn btn-primary" 
               (click)="activeModal.close('Finish click')" prevent-double- 
               submit>{{ 'store.add.finish' | translate }}</button>
       </div>
    </div>
</form>

以及如何通过我的component.ts调用模式

    const modal = this._modalService.open(ModalComponent, { backdrop: 
       'static', size: 'lg'});
    modal.result.then(
        (data) => {
           // some code
        },
        () => {
        }
    );

我的问题是如何删除这种不符合我们预期行为的默认自动对焦？

感谢您的阅读，请原谅拼写错误。