Angular 弹出窗口绑定未按预期工作

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);

  }
}

Angular 弹出窗口绑定未按预期工作

Angular popover binding doesn't work as expected

ng-bootstrap

angular