无法在组件Angular 8中绑定动态数据

Question

动态加载组件时出错

DynamicBuilderComponent.ngfactory.js：198错误错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。 以前的值：'ng-pristine：true'。 当前值：“ ng-pristine：false”。

问题

    after binding json in select2data to select2 component Angular throw exception.

组件代码

           @Component({
              changeDetection: ChangeDetectionStrategy.OnPush,
              selector: 'select2',

在组件中导入了changeDetection。

              template: `
                  <div [formGroup]="form">

                    <ng-container>
                        <ng-select2
                          [data]="select2data"
                          [options]="options"
                          [width]="500"

                          [formControlName]="field.code"
                          (keyup)="changed($event.target.value)">
                        </ng-select2>
                    </ng-container>

                  </div>`
            })

select2组件类

            export class Select2Component implements OnInit {
              @Input() field: any = {};
              @Input() form: FormGroup;
              public exampleData: Array<Select2OptionData>;
              public options: Options;
              public value: string[];
              select2data: any;
              public selected: string;

              constructor(public cl: Services,private cd: ChangeDetectorRef) {
                this.options = {
                  width: '258',
                  multiple: true,
                  tags: false
                };
              }

绑定后的问题区域在ng select2组件中订阅数据

              changed(search: any) {

               //call service pass search text to service
                return this.cl.searchFunc(search).subscribe(
                  res1 => 
                          this.select2data = res1.data;
                              this.cd.markForCheck(); // marks path
                      }
                    }
                  },
                  error => {
                    console.log('error  = ', error);
                  });
              }

            }

我试图在console.log中打印this.select2data它返回我json。

Vendor.js

            function expressionChangedAfterItHasBeenCheckedError(context, oldValue, currValue, isFirstCheck) {
                var msg = "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '" + oldValue + "'. Current value: '" + currValue + "'.";
                if (isFirstCheck) {
                    msg +=
                        " It seems like the view has been created after its parent and its children have been dirty checked." +
                            " Has it been created in a change detection hook ?";
                }
                return viewDebugError(msg, context);
            }

好文章

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

参考

表达式___在检查后已更改

• 任何建议都是最欢迎的。

Answer 1

我相信您将组件select2放在另一个包含表单的组件内，然后将其传递给select2以创建另一个<form>标记，对吗？ 我的意思是你有那样的东西吗？

<form [formGroup]="form">
    <!-- Some code -->
    <select2 [field]="something" [form]="form"></select2>
</form>

如果是这样，那么您的select2组件不应包含表单的重新声明，它根本不应该包含与表单相关的任何内容。 它应该是一个表单控件。 请仔细阅读后如何创建自定义窗体控件通过Netanel基础。 您将需要为select2创建ControlValueAccessor ，然后通过自定义提供程序将其连接到Angular表单。

您面临的问题是，由于您在DOM中两次包含了form对象，因此数据更改也被传播了两次，并且遇到了问题。 模板中应该仅对FormGroup的特定实例有一个引用。

Answer 2

有效的解决方案

         @Component({
          changeDetection: ChangeDetectionStrategy.OnPush,
          selector: 'select2',
          export class Select2Component implements OnInit {
            constructor(public cl: Services,private cd: ChangeDetectorRef) {
            this.options = {
              width: '258',
              multiple: true,
              tags: false
            };
          }

装订功能

 changed(search: any) {

           //call service pass search text to service
            return this.cl.searchFunc(search).subscribe(
              res1 => 
                      this.select2data = res1.data;
                      this.cd.markForCheck(); // marks path
                     this.cd.detectChanges();
                  }
                }
              },
              error => {
                console.log('error  = ', error);
              });
          }