Question

我对Angular并不陌生，希望有人能帮助我弄清楚我做错了什么。多年来我一直试图弄清楚这个问题。

我正在使用pdftron外部api，使您能够显示pdf，选择文本并显示它。因此，我实例化了pdftron，并在突出显示添加事件注释后立即获取数据（选定的文本）。现在，一旦人们选择了文本，我希望将其显示在我拥有的输入字段中，但我无法这样做。我通过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工具设置为突出显示并侦听注解更改后的事件侦听器。一旦他们添加了突出显示注释，我就可以使用notes.getContents获取文本并更新输入的值。但是，当我在输入字段之外单击时，这不会自动更改输入中的值。仅当我单击表单中的其他输入字段时，它才会更新。

但是我不希望这样，我希望有人停止选择文本后立即对其进行更新。我不知道我做错了什么，并且在过去的两个星期里一直在努力解决。我希望这个问题有意义。我想进一步澄清。任何帮助将不胜感激。

谢谢。

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');
        }
      }
    );
  }
}

ngModel不更新值

1 个答案: