无法修补 PrimeNG p 编辑器组件的值

Question

我创建了一个使用 p-editor 元素来编写富格式文本的表单，但是我遇到了一个问题，编辑器创建并提交富文本，但是当我们想要使用服务器中的值更新表单时，使用角度反应形式 patchValue 方法不会根据需要更新编辑器。这是我的代码

模板：

<form>
  <div class="col-12 my-3">
      <label class="small font-bold" for="content" i18n>Requirments</label>
      <p-editor formControlName="content" id="content" placeholder="content..." [style]="{ height: '200px' }"></p-editor>
    </div>
</form>

组件：

export class SampleComponent implements OnChanges {

 @Input() data?: {content: string};
 formEditor: FormGroup

 constructor(
    private _fb: FormBuilder,
  ) 
 {
  this.formEditor = this._fb.group({
     content: ["", Validators.required]
  })
 }

 ngOnChanges() {
// I verified and indeed the data comes when there is a change 
    if (this.data) {
      this.patchEditorForm(this.data);
    }
 }

 private patchEditorForm = (data: {content: string}) => {
    this.formEditor.patchValue({
      content: post.content
    })
 }

}

我使用了 AfterViewInit 和 Angular

@ViewChild

装饰器，但它仍然不起作用

Answer 1

data

是一个对象，对象在javascript中存储为对内存的引用，需要注意的是，即使你更改了

content

（

data

的内部属性），内存对

data

的引用保持不变，所以即使内部属性发生数据变化，Angular 也无法识别某些内容发生了变化。

解决方案是更改内存引用，一种常见的方法称为对象解构，当我们创建一个新数组并将原始属性更新为新数组时，命令将是

this.data = { ...this.data };

执行此操作后，将检测到更改。下面是工作示例！

完整代码：

主要

import { Component } from '@angular/core';
import { ChildComponent } from './child/child.component';

@Component({
  selector: 'editor-basic-demo',
  standalone: true,
  imports: [ChildComponent],
  template: `
    <app-child [data]="data"/>
  `,
})
export class EditorBasicDemo {
  name = 'Angular';
  data = {
    content: '',
  };

  ngOnInit() {
    setInterval(() => {
      this.data.content = `${Math.random()}`;
      this.data = { ...this.data }; // use object destructuring to create a new reference of memory for the array
      // this will cause angular to detect a change and trigger ngOnChanges when changed!
    }, 2000);
  }
}

孩子

import { Component, Input } from '@angular/core';
import { EditorModule } from 'primeng/editor';
import {
  FormBuilder,
  FormGroup,
  Validators,
  ReactiveFormsModule,
} from '@angular/forms';

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [ReactiveFormsModule, EditorModule],
  template: `
  asd
    <form [formGroup]="formEditor">
      <div class="col-12 my-3">
          <label class="small font-bold" for="content">Requirments</label>
          <p-editor formControlName="content" id="content" placeholder="content..."></p-editor>
        </div>
    </form>
  `,
})
export class ChildComponent {
  @Input() data?: { content: string };
  formEditor: FormGroup = new FormGroup({});

  constructor(private _fb: FormBuilder) {
    this.formEditor = this._fb.group({
      content: ['', Validators.required],
    });
  }

  ngOnChanges() {
    // I verified and indeed the data comes when there is a change
    if (this.data) {
      this.patchEditorForm(this.data);
    }
  }

  private patchEditorForm = (data: { content: string }) => {
    this.formEditor.patchValue({
      content: data.content,
    });
  };
}

Stackblitz 演示