fix: avoid many fn calling problem

#4865

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html

@@ -1,15 +1,13 @@
 <div class="form-group" [abpPermission]="prop.permission" [ngSwitch]="getComponent(prop)">
   <ng-template ngSwitchCase="input">
-    <label [htmlFor]="prop.id"
+    <label [htmlFor]="prop.id">{{ prop.displayName | abpLocalization }} {{ asterisk }}</label>
-      >{{ prop.displayName | abpLocalization }} {{ getAsterisk(prop, data) }}</label
-    >
     <input
       [id]="prop.id"
       [formControlName]="prop.name"
       [autocomplete]="prop.autocomplete"
       [type]="getType(prop)"
-      [abpDisabled]="prop.disabled(data)"
+      [abpDisabled]="disabled"
-      [readonly]="prop.readonly(data)"
+      [readonly]="readonly"
       class="form-control"
     />
   </ng-template>
@@ -19,28 +17,26 @@
       <input
         [id]="prop.id"
         [formControlName]="prop.name"
-        [abpDisabled]="prop.disabled(data)"
+        [abpDisabled]="disabled"
         type="checkbox"
         class="custom-control-input"
       />
       <label [htmlFor]="prop.id" class="custom-control-label"
-        >{{ prop.displayName | abpLocalization }} {{ getAsterisk(prop, data) }}</label
+        >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label
       >
     </div>
   </ng-template>
 
   <ng-template ngSwitchCase="select">
-    <label [htmlFor]="prop.id"
+    <label [htmlFor]="prop.id">{{ prop.displayName | abpLocalization }} {{ asterisk }}</label>
-      >{{ prop.displayName | abpLocalization }} {{ getAsterisk(prop, data) }}</label
-    >
     <select
       [id]="prop.id"
       [formControlName]="prop.name"
-      [abpDisabled]="prop.disabled(data)"
+      [abpDisabled]="disabled"
       class="custom-select form-control"
     >
       <option
-        *ngFor="let option of prop.options(data) | async; trackBy: track.by('value')"
+        *ngFor="let option of options$ | async; trackBy: track.by('value')"
         [ngValue]="option.value"
         >{{ option.key }}</option
       >
@@ -48,9 +44,7 @@
   </ng-template>
 
   <ng-template ngSwitchCase="date">
-    <label [htmlFor]="prop.id"
+    <label [htmlFor]="prop.id">{{ prop.displayName | abpLocalization }} {{ asterisk }}</label>
-      >{{ prop.displayName | abpLocalization }} {{ getAsterisk(prop, data) }}</label
-    >
     <input
       [id]="prop.id"
       [formControlName]="prop.name"
@@ -64,28 +58,22 @@
   </ng-template>
 
   <ng-template ngSwitchCase="time">
-    <label [htmlFor]="prop.id"
+    <label [htmlFor]="prop.id">{{ prop.displayName | abpLocalization }} {{ asterisk }}</label>
-      >{{ prop.displayName | abpLocalization }} {{ getAsterisk(prop, data) }}</label
-    >
     <ngb-timepicker [formControlName]="prop.name"></ngb-timepicker>
   </ng-template>
 
   <ng-template ngSwitchCase="dateTime">
-    <label [htmlFor]="prop.id"
+    <label [htmlFor]="prop.id">{{ prop.displayName | abpLocalization }} {{ asterisk }}</label>
-      >{{ prop.displayName | abpLocalization }} {{ getAsterisk(prop, data) }}</label
-    >
     <abp-date-time-picker [prop]="prop"></abp-date-time-picker>
   </ng-template>
 
   <ng-template ngSwitchCase="textarea">
-    <label [htmlFor]="prop.id"
+    <label [htmlFor]="prop.id">{{ prop.displayName | abpLocalization }} {{ asterisk }}</label>
-      >{{ prop.displayName | abpLocalization }} {{ getAsterisk(prop, data) }}</label
-    >
     <textarea
       [id]="prop.id"
       [formControlName]="prop.name"
-      [abpDisabled]="prop.disabled(data)"
+      [abpDisabled]="disabled"
-      [readonly]="prop.readonly(data)"
+      [readonly]="readonly"
       class="form-control"
     ></textarea>
   </ng-template>

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -1,14 +1,17 @@
-import { TrackByService } from '@abp/ng.core';
+import { ABP, TrackByService } from '@abp/ng.core';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   Input,
   Optional,
+  SimpleChanges,
   SkipSelf,
+  OnChanges,
 } from '@angular/core';
-import { ControlContainer, Validators } from '@angular/forms';
+import { ControlContainer, Validators, ValidatorFn } from '@angular/forms';
 import { NgbDateAdapter, NgbTimeAdapter } from '@ng-bootstrap/ng-bootstrap';
+import { Observable, of } from 'rxjs';
 import { DateAdapter } from '../../adapters/date.adapter';
 import { TimeAdapter } from '../../adapters/time.adapter';
 import { ePropType } from '../../enums/props.enum';
@@ -30,15 +33,23 @@ import { selfFactory } from '../../utils/factory.util';
     { provide: NgbTimeAdapter, useClass: TimeAdapter },
   ],
 })
-export class ExtensibleFormPropComponent {
+export class ExtensibleFormPropComponent implements OnChanges {
   @Input() data: PropData;
 
   @Input() prop: FormProp;
 
+  options$: Observable<ABP.Option<any>[]> = of([]);
+
+  validators: ValidatorFn[] = [];
+
+  readonly: boolean;
+
+  disabled: boolean;
+
   constructor(public readonly cdRef: ChangeDetectorRef, public readonly track: TrackByService) {}
 
-  getAsterisk(prop: FormProp, data: PropData): string {
+  get asterisk(): string {
-    return prop.validators(data).some(validator => validator === Validators.required) ? '*' : '';
+    return this.validators.some(validator => validator === Validators.required) ? '*' : '';
   }
 
   getComponent(prop: FormProp): string {
@@ -77,4 +88,16 @@ export class ExtensibleFormPropComponent {
         return 'hidden';
     }
   }
+
+  ngOnChanges({ prop }: SimpleChanges) {
+    const options = prop.currentValue.options;
+    const readonly = prop.currentValue.readonly;
+    const disabled = prop.currentValue.disabled;
+    const validators = prop.currentValue.validators;
+
+    if (options) this.options$ = options(this.data);
+    if (readonly) this.readonly = readonly(this.data);
+    if (disabled) this.disabled = disabled(this.data);
+    if (validators) this.validators = validators(this.data);
+  }
 }

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts

@@ -1,20 +1,16 @@
 import { TrackByService } from '@abp/ng.core';
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   Inject,
   Input,
-  OnDestroy,
   Optional,
   QueryList,
   SkipSelf,
   ViewChildren,
 } from '@angular/core';
 import { ControlContainer, FormGroup } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
 import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
 import { FormPropList } from '../../models/form-props';
 import { ExtensionsService } from '../../services/extensions.service';
@@ -35,7 +31,7 @@ import { ExtensibleFormPropComponent } from './extensible-form-prop.component';
     },
   ],
 })
-export class ExtensibleFormComponent<R = any> implements AfterViewInit, OnDestroy {
+export class ExtensibleFormComponent<R = any> {
   @ViewChildren(ExtensibleFormPropComponent)
   formProps: QueryList<ExtensibleFormPropComponent>;
 
@@ -46,7 +42,6 @@ export class ExtensibleFormComponent<R = any> implements AfterViewInit, OnDestro
     this.record = record;
   }
 
-  private subscription = new Subscription();
   extraPropertiesKey = EXTRA_PROPERTIES_KEY;
   propList: FormPropList<R>;
   record: R;
@@ -66,17 +61,4 @@ export class ExtensibleFormComponent<R = any> implements AfterViewInit, OnDestro
     private extensions: ExtensionsService,
     @Inject(EXTENSIONS_IDENTIFIER) private identifier: string,
   ) {}
-
-  ngAfterViewInit() {
-    this.subscription.add(
-      this.form.statusChanges.pipe(debounceTime(0)).subscribe(() => {
-        this.formProps.forEach(prop => prop.cdRef.markForCheck());
-        this.cdRef.detectChanges();
-      }),
-    );
-  }
-
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-  }
 }