Question

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

提取工作正常，但是listitems的选择不会更新。因此，如何在on-blur事件调用中刷新/重新加载/更新某个webelement（无论是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会加载默认值 - ＆gt;这很有效。

然后用户在输入元素中输入一个Url并单击它，从而调用模糊功能。从Url中提取项目列表 - ＆gt;也可以工作（我在模糊调用后立即控制记录了列表。）

现在，select元素应该更新以显示最近提取的列表，并让用户选择它的一个元素 - ＆gt;不工作，因为它仍然显示默认值。连接的.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，因此它正在不同的上下文中执行，因此您需要将该回调绑定到上下文/你的班级范围如下：

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

实现此目的的另一种方法是明确使用胖箭头函数：

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

如何在模糊事件调用（Angular 2，Typescript）上刷新webelement？

1 个答案: