如何在 blur-event 调用时刷新 webelement (Angular 2, Typescript)？

Question

我正在编写一个带有 html 网站的应用程序，用户在该网站上将 Url 写入文本字段，当离开所述文本字段时，他可以从列表中选择一些内容从 URL.

中提取

提取工作正常，但列表项的 selection 不会更新。因此，如何在 on-blur 事件调用中 refresh/reload/update 某个网络元素（无论是 div 还是 select）？

进一步说明：

我有一个 html 看起来有点像这样：

<div><input (blur)="onBlurCall($event)" [(ng-model)]="x.url"></div>

<div>
    <select [(ng-model)]="x.extractedElement">
        <option *ng-for="#l of extractedList" value="{{ l.name }}">
            {{ l.label }}
        </option>
    </select>
</div>

现在我想要的是：用户加载站点。输入元素中尚未定义 Url，因此 select 加载默认值 -> 有效。

然后用户在输入元素中输入一个Url并点击退出，从而调用blur函数。从 Url 中提取了一个项目列表 -> 也有效（我在 blur 调用后立即在控制台记录了该列表）。

现在 select 元素应该更新以显示最近提取的列表并让用户 select 它的一个元素 -> 不起作用，因为它仍然显示默认值。连接的 .ts 文件的作用在这里应该不是什么大问题，但如果需要，我也可以提供有关它的信息。

脚本部分参考打字稿，因为这是我正在使用的（而且我不够流利，无法将 js 翻译成 ts）。

根据要求，ts文件的部分内容：

export class configuration {

// bunch of variables
public extractedList: Array<listItem>;

constructor() {
    // other initlializations
    this.config = DataContainer.Config; // contains url variable
    var l= new listItem();
    //console.log('default list being build');
    l.Label = 'Please enter the local Url first';
    l.Url = '';
    l.Name = 'default l';
    this.extractedList= [l]; 
    //console.log('default list name: ' + l.Name);
}

  public onLocalUrlBlur(event) {
    //console.log('Blur call');
    this.otherService.getExtractedList(this.config.localUrl, this.setExtractedList, this.getExtractedListError);
    // calls external service to extract the list 
  }

  public setExtractedList(listData) {
    //console.log('set list ' + listData);
    this.extractedList= listData;
    //console.log('new list first label: ' + this.extractedList[0].Label);
  }
}

Answer 1

好的，由于您将方法 this.setExtractedList 作为回调传递给 getExtractedList，它是在不同的上下文中执行的，因此您需要将该回调绑定到你的 class 的 context/scope 像这样：

this.otherService.getExtractedList(
  this.config.localUrl,
  this.setExtractedList.bind(this),
  this.getExtractedListError);

实现此目的的另一种方法是显式使用粗箭头函数：

this.otherService.getExtractedList(
  this.config.localUrl,
  (listData)  => { this.setExtractedList(listData) },
  this.getExtractedListError);

如何在 blur-event 调用时刷新 webelement (Angular 2, Typescript)？

How to refresh webelement on blur-event call (Angular 2, Typescript)?

html

javascript

typescript

angular