javascript - Angular - ngModel 在我点击 textarea 之前不会更新

Question

我有一个带有文本框的 google-chrome 弹出窗口。当用户输入文本框时，文本被保存到 chrome 本地存储中。当弹出窗口关闭然后重新打开时，文本框应该自动填充最后保存的文本。它工作得很好，除了当我关闭并打开弹出窗口时，文本字段似乎是空的，并且在我单击文本字段之前不会自动填充。我知道弹出窗口打开时该值已更改，因为它正在记录到控制台，直到单击后我才能看到更改。知道我做错了什么吗？

app.componenet.html

<div>

  <mat-form-field>
    <mat-label>Input</mat-label>
    <textarea matInput [(ngModel)]='myText' (ngModelChange)="saveChanges()"></textarea>
  </mat-form-field>

</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {this.restore()};

  title = 'dataStoreTest';
  myText = '';

  saveChanges() {
    chrome.storage.local.set({storedText: this.myText});
    console.log('save');
  }

  restore(){
    let self = this;
    chrome.storage.local.get( ['storedText'], function(result){
      self.myText = result.storedText;
      console.log(result.storedText +' Was restored');
    });
  }

}

标签： javascriptangulartypescriptgoogle-chromegoogle-chrome-extension

Answer 1

我仍然不确定为什么会发生这种情况，但是通过使用 localStorage 而不是 chrome.storage.local- 来解决它

固定代码 -

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {this.restore()};

  title = 'dataStoreTest';
  myText = '';

  saveChanges() {
    localStorage.setItem('storedText', this.myText);
    console.log('save');
  }

  restore(){
      this.myText = localStorage.getItem('storedText');
      console.log(localStorage.getItem('storedText') +' Was restored');
  }

}