Question

我正在尝试绑定弹出窗口内容值。我正在使用ng-bootstrap。

侦听文本的输入更改：

<input (keyup)="onTextChange($event)" type="text" class="form-control" placeholder="Enter font family">

我的弹出按钮：

<button type="button" class="btn btn-secondary" placement="top"
    [ngbPopover]="text2" popoverTitle="Popover on top"> Popover on top </button>

ts文件：

import {Component} from '@angular/core';
@Component({
  selector: 'ngbd-popover-basic',
  templateUrl: 'src/popover-basic.html'
})
export class NgbdPopoverBasic {
  text2: string = '';

  onTextChange(event: any) {
    this.text2 = event.target.value;
  }
}

它有效，但未达到预期效果。弹出窗口处于活动状态时，弹出窗口内容的值不会更改，我必须关闭并重新打开它才能看到弹出窗口的值已更改。

以下是我要执行的操作的一个示例：http://plnkr.co/edit/WS65zQNNvO99YwXmafFE?p=preview

Answer 1

实际上，@ngbPopover仅在调用open方法之后更新。

您可以像这样修改代码。想法是必须先关闭弹出窗口，然后再设置值。

HTML

<input (keyup)="onTextChange($event)" type="text" class="form-control" id="fontFamilyHeader" aria-describedby="fontFamilyHeader" placeholder="Enter font family">

<button class="btn btn-primary" ngbPopover #a="ngbPopover">Click me </button>

ts

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

@Component({
  selector: 'ngbd-popover-triggers',
  templateUrl: 'src/popover-triggers.html'  
})
export class NgbdPopoverTriggers {
  @ViewChild('a') public a:NgbPopover;

  public onTextChange(event: any) {


    const isOpen = this.a.isOpen();
    if(isOpen)
    {
       this.a.close();
    }
    this.a.ngbPopover= event.target.value;
    this.a.open(event.target.value);

  }
}

角度弹出框绑定未按预期工作

1 个答案: