ngModel 不更新值

Question

我对 Angular 还很陌生。我希望有人能帮我弄清楚我做错了什么。多年来，我一直试图弄清楚这一点。

我正在使用 pdftron 一个外部 api，它使您能够显示 pdf、选择文本并显示它。所以，我已经实例化了 pdftron，只要我听到添加的事件注释突出显示，我就会得到数据（选定的文本）。现在，一旦人们选择了一个文本，我希望它显示在我拥有的输入字段上，但我无法这样做。我正在使用 via ngfor 迭代显示所有输入字段。我有一个模型，它定义了表单上的内容。

这是我的表单模型：

export class FormModel {
  id: number;
  inputText: string;
  placeholder: string;
  required: boolean;
  firstCheck: boolean;
  secondCheck: boolean;
  value: any;
  metadata: any;
}

这是我的表单组件：

<div class="row form_content">
  <div class="col-12">
    <form>
      <div
        *ngFor="let item of formelement"
        [class.selected]="item.id === selectedInput"
        class="form-group row"
      >
        <label for="{{ item.inputText }}" class="col-sm-4 col-form-label">{{
          item.inputText
        }}</label>
        <div class="col-sm-6">
          <i
            class="fas fa-exclamation-circle fa-lg mr-1"
            [hidden]="!item.required"
          ></i>
          <input
            type="text"
            class="form-control"
            id="{{ item.inputText }}"
            (click)="onfocus(item.id)"
            placeholder="{{ item.placeholder }}"
            [(ngModel)]="item.value"
            [ngModelOptions]="{ standalone: true }"
          />
        </div>
        <div
          class="col-1 check_circle first_check_circle col-1 d-flex justify-content-center align-items-center"
        >
          <i
            class="fas"
            [ngClass]="
              item.firstCheck
                ? 'fa-check-circle fa-check-circle-checked'
                : 'fa-check-circle'
            "
          ></i>
        </div>

        <div
          class="col-1 check_circle col-1 d-flex justify-content-center align-items-center"
        >
          <i
            class="fas fa-check-circle"
            [ngClass]="
              item.secondCheck
                ? 'fa-check-circle fa-check-circle-checked'
                : 'fa-check-circle'
            "
          ></i>
        </div>
      </div>
    </form>
  </div>
</div>

这是我的组件打字稿文件。

import {
  Component,
  OnInit
} from '@angular/core';
import { FormModel } from './form.model';
import { PdfTronService } from 'src/app/components/home/pdftron/pdftron.service';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  selectedInput: number;
  formelement: FormModel[] = [
    {
      id: 0,
      inputText: 'Increase Amount',
      placeholder: 'Increase Amount',
      required: true,
      firstCheck: true,
      secondCheck: false,
      value: '',
      metadata: ''
    },
    {
      id: 1,
      inputText: 'Increase Frequency',
      placeholder: 'Increase Frequency',
      required: true,
      firstCheck: false,
      secondCheck: true,
      value: '',
      metadata: ''
    }
  ];

  constructor(
    private pdftronService: PdfTronService
  ) {}

  ngOnInit() {}

  onfocus(id) {
    this.selectedInput = id;
    this.pdftronService.webViewerInstance.setToolMode(
      'AnnotationCreateTextHighlight'
    );
    this.pdftronService.annotManager.on(
      'annotationChanged',
      (event, annotations, action) => {
        if (action === 'add') {
          // this should update the input value and show on UI but it does not until i click the other input field. 
          this.formelement[
            this.selectedInput
          ].value = annotations[0].getContents();
          // code reaches all the way to the end
          console.log('Running from here');
        }
      }
    );
  }
}

正如您在有人单击输入字段时看到的那样。我调用 onfocus 并将 pdftron 工具设置为突出显示并监听 annotationchanged 上的事件侦听器。一旦他们添加了高亮注释，我就使用 annotation.getContents 获取文本并更新输入的值。但这不会自动更改输入中的值，当我在输入字段外单击时也不会自动更改。只有当我单击表单中的其他输入字段时，它才会更新。

但我不希望这样，而是希望在有人停止选择文本后立即更新它。我不知道我做错了什么，并且在过去 2 周一直试图解决这个问题。我希望这个问题有意义。我很想进一步澄清它。任何形式的帮助将不胜感激。

谢谢。

Answer 1

我不知道这是否是正确的方法，但我能够使用 ChangeDetectorRef 解决它。更新值后，我调用了方法 detectChanges。即使我已经解决了它，我也不知道它是否是正确的方法。这是我的组件打字稿的样子，它会在人们选择文本后立即更新值。

import {
  Component,
  OnInit,
  ChangeDetectorRef
} from '@angular/core';
import { FormModel } from './form.model';
import { requiredDataService } from './form.service';
import { PdfTronService } from 'src/app/components/home/pdftron/pdftron.service';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  selectedInput: number;
  formelement: FormModel[] = [
    {
      id: 0,
      inputText: 'Increase Amount',
      placeholder: 'Increase Amount',
      required: true,
      firstCheck: true,
      secondCheck: false,
      value: '',
      metadata: ''
    },
    {
      id: 1,
      inputText: 'Increase Frequency',
      placeholder: 'Increase Frequency',
      required: true,
      firstCheck: false,
      secondCheck: true,
      value: '',
      metadata: ''
    }
  ];

  constructor(
    private requiredData: requiredDataService,
    private pdftronService: PdfTronService,
    private changeRef: ChangeDetectorRef
  ) {}

  ngOnInit() {}

  onfocus(id) {
    this.selectedInput = id;
    this.pdftronService.webViewerInstance.setToolMode(
      'AnnotationCreateTextHighlight'
    );
    this.pdftronService.annotManager.on(
      'annotationChanged',
      (event, annotations, action) => {
        if (action === 'add') {
          // this should update the input value and show but it does not unless i click the other input field
          this.formelement[
            this.selectedInput
          ].value = annotations[0].getContents();
          // Detecting the change in application state. 
          this.changeRef.detectChanges();
          // code reaches all the way to the end
          console.log('Running from here');
        }
      }
    );
  }
}