在Chrome扩展程序中，变量为数据绑定时不会更新

Question

我正在使用Angular4创建一个chrome扩展。

在我的某个组件中，我将textarea的值设置为chrome选项卡上所选内容的值。

一切看起来都有效，但是一旦将值传递给我的变量，插件的视图就不会更新。

这是我的代码：

HTML：

<div class="container-fluid main">
<textarea name="selectedText" id="selectedText" [(ngModel)]="selectedText"></textarea>
<button (click)="getSelectedText()">Get the selected text</button>

TS：

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

@Component({
    selector: 'app-capture',
    templateUrl: './capture.component.html',
    styleUrls: ['./capture.component.css']
})
export class CaptureComponent implements OnInit {
    selectedText = '';

    constructor() {
    }

    ngOnInit() {}

    getSelectedText() {
        chrome.tabs.executeScript( {
            code: 'window.getSelection().toString();'
        }, (selection) => {
            this.selectedText = selection[0];
            console.log('the callback value is: ' + this.selectedText);
        });
    }
}

我尝试了什么：

我添加了一个触发无用功能的按钮，只是为了刷新这样的视图：

HTML：

<button (click)="refresh()">Test button</button>

TS：

refresh() {
    console.log('hello world');
}

如果我点击＆＃34;获取所选文字＆＃34;按钮两次，或点击＆＃34;获取所选文字＆＃34;然后在＆＃34;测试按钮＆＃34;，我得到了textarea中的值。我不知道错误在哪里，或者我怎么能告诉角度以继续观察我的数据绑定。

如果只选择一次＆＃34;获取所选文本＆＃34;我如何在我的textarea中获得正确的值？按钮吗

另外，为什么角度会因我的数据绑定而停止观察我的变量？这与Chrome有关吗？