打字稿：反應形式patchValue不適用于私有屬性和getter/setter

我正在使用帶有 .net6.0 框架的 Angular/.net 應用程式，Angular：13.1.2，Node：16.13.1 和 EMCAScript 5。

我在打字稿中有以下人員類。

export class Person {

  private _name: string = '';
    
  constructor() {
  }

  public get name(): string {
    return this._name;
  }

  public set name(value: string) {
    this._name = value;
  }
}

編譯時會生成以下 person.model.js 檔案。但我的印象是 Object.defineProperties 不起作用。

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Person = /** @class */ (function () {
    function Person() {
        this._name = '';
    }
    Object.defineProperty(Person.prototype, "name", {
        get: function () {
            return this._name;
        },
        set: function (value) {
            this._name = value;
        },
        enumerable: true,
        configurable: true
    });
    return Person;
}());
exports.Person = Person;
//# sourceMappingURL=person.model.js.map

每當我嘗試使用物件更新我的 Reactive 表單時，都不會更新資料。在除錯時，我只注意到“Object.Keys”陣列中的“_name”屬性。

 this.personForm.get('person')?.patchValue(person);

反應形式定義如下。

    return formBuilder.group({
      person: formBuilder.group({
        name: [
          '',
          [
            Validators.required
          ]
        ]
      })
    });

每當我用“Object.DefineProperty”更新我的班級時，上面更新反應式表單的代碼似乎都沒有問題。此外，“Name”屬性似乎已添加到“Object.Keys”陣列中。

export class Person {

  private _name: string = '';
    
  constructor() {
    Object.defineProperty(this, 'name', {
      set: function (value: string) {
        this._name = value;
      },
      get: function () {
        return this._name;
      },
      enumerable: true
    })
  }
}

Do I need to add the Object.defineProperties in the .ts file or is my application not using the generated .js files ?

EDIT:

Component

export class PersonComponent implements OnInit {

  personForm!: FormGroup;

  constructor(
    private _fb: FormBuilder) {}

  private CreateFormGroup(formBuilder: FormBuilder): FormGroup {
    return formBuilder.group({
      person: formBuilder.group({
        name: [
          '',
          [
            Validators.required
          ]
        ]
      })
    });
  }

  ngOnInit(): void {
    this.personForm = this.CreateFormGroup(this._fb);
  }

  setPerson(person: Person) {
    if (person != undefined) {
      this.personForm.get('person')?.patchValue(person);
    }
  }

}

HTML:

<mat-card class="mat-elevation-z10">
  <mat-card-title>Person</mat-card-title>
  <mat-card-content>
    <form [formGroup]="personForm">
      <div formGroupName="person">
        <mat-form-field class="person-name">
          <input id="name" matInput aria-label="name" type="text" formControlName="name" autofocus required />
          <mat-placeholder class="placeholder">name</mat-placeholder>
        </mat-form-field>
      </div>
      <br />
    </form>
  </mat-card-content>
</mat-card>
<app-person-selection (personEvent)="setPerson($event)"></app-person-selection>

uj5u.com熱心網友回復：

TypeScript 確實將 getter/setter 轉換為等效的Object.defineProperty語法。

但是，如果您仔細查看轉譯后的代碼，您會發現該name屬性是在Person.prototypeie 函式原型上定義的，而不是在函式本身上定義的。

// Transpiled code with v3.9.7
var Person = /** @class */ (function () {
    function Person() {
        this._name = '';
    }
    Object.defineProperty(Person.prototype, "name", {  // <----
        get: function () {
            return this._name;
        },
        set: function (value) {
            this._name = value;
        },
        enumerable: false,
        configurable: true
    });
    return Person;
}());

而在第二種情況下，您手動定義Object.defineProperty，您將第一個引數傳遞為this，而不是 Person.prototype。

// Transpiled code with v3.9.7
var Person = /** @class */ (function () {
    function Person() {
        this._name = '';
        Object.defineProperty(this, 'name', {  // <----
            set: function (value) {
                this._name = value;
            },
            get: function () {
                return this._name;
            },
            enumerable: true
        });
    }
    return Person;
}());

這就是為什么name屬性Object.keys在第一個場景（getter/setter）中不可見，但在第二個場景中可見的原因。出于同樣的原因，patchValue它不起作用，因為name它不是物件自己的可列舉屬性。

標籤：angular typescript

上一篇：在Angular中從一個選單切換到另一個選單

下一篇：角度-如何撰寫正確的ngIf條件-陣列長度大于1