Question

在第二次设置textarea组件的可见性时，它会抛出标题中提到的错误。这是一个用来证明问题的人：https://plnkr.co/edit/jW4KXfsI7WLgQxI1ne0r?p=preview 有问题的组件代码：

import {Component, OnInit, ElementRef, ViewChild, Input, forwardRef, ChangeDetectorRef} from "@angular/core";
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";

const noop = () => {
};

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TextareaComponent),
  multi: true
};

@Component({
  selector: 'app-textarea',
  templateUrl: './textarea.component.html',
  styleUrls: ['./textarea.component.scss'],
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class TextareaComponent implements OnInit, ControlValueAccessor  {

  private _value = '';
  private _defaultLimit: number = 200;
  @Input('charLimit')
  private _charLimit: number;
  @Input('lineLimit')
  private _lineLimit:number;
  @Input('doLimitChar')
  private _doLimitChar: boolean = true;
  @ViewChild('storyText')
  private _textAreaElement: ElementRef;
  private _disabled: boolean = false;
  /** Callback registered via registerOnTouched (ControlValueAccessor) */
  private _onTouchedCallback: () => void = noop;
  /** Callback registered via registerOnChange (ControlValueAccessor) */
  private _onChangeCallback: (_: any) => void = noop;

  constructor(private _crf:ChangeDetectorRef) {
  }

  ngOnInit() {
    this._charLimit = this._charLimit || this._defaultLimit;
  }

  get value():any {
    return this._value;
  }

  set value(v: any) {
    if (!v) v = "";
    if (this._doLimitChar) {
      v = v.substring(0, this._charLimit);
    }
    this._value = v;
    this._textAreaElement.nativeElement.value = v;
    this._onChangeCallback(v);
  }

  // get empty() {
  //   return ( this.value == null || this.value === '')
  // }
  //
  // get charCount(): number {
  //   return this.empty ? 0 : ('' + this.value).length;
  // }

  get remainingCharacterCount(): number {
    return this._charLimit - this.value.length;
  }

  get linesNumber():number {
    return this.value.split('\n').length;
  }

  /** Implemented as part of ControlValueAccessor. */
  writeValue(value: any) {
    this.value = value;
  }

  /** Implemented as part of ControlValueAccessor. */
  registerOnChange(fn: any) {
    this._onChangeCallback = fn;
  }

  /** Implemented as part of ControlValueAccessor. */
  registerOnTouched(fn: any) {
    this._onTouchedCallback = fn;
  }

  /** Implemented as a part of ControlValueAccessor. */
  setDisabledState(isDisabled: boolean) {
    this._disabled = isDisabled;
  }

}

Answer 1

我不知道究竟是什么导致了错误，但//$con->mysql_query($sql,TRUE); //execute the update query $result= mysql_query("SELECT * FROM article",$con); // get new updated table data修复了错误

detectChanges()

Plunker example

与toggleTldr() { this.isTldrVisible = !this.isTldrVisible; this.crf.detectChanges(); }的区别在于，markForCheck()会立即运行更改检测。

我想根本原因是你混合模板驱动（detectChanges()）和反应形式（ngModel）。

检查后表情发生了变化。

1 个答案: