无法绑定组件角8中的动态数据

Question

组件加载动态时的错误

DynamicBuilderComponent.ngfactory.js:198错误: ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改。以前的价值：“ng-原始:真”。现值：“ng-原始:假”。

问题

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

            }

我试着在this.select2data的console.log中打印它返回的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关于如何创建自定义窗体控件的职位。您将需要为您的ControlValueAccessor创建select2，并通过自定义提供程序将其连接到角形。

您面临的问题是，由于您在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);
              });
          }