未從模型調用設置器/獲取器

Question

我有一個雙向綁定不能正常工作的問題，我認為getter和setter方法是問題所在。

正如您在示例中看到的那樣，我兩次使用了data屬性member.selectedConfig 。 我看，加載組件時，它們兩個的值都應該是"HelloWorld"但都不是。

當我開始手動更改文本框的值時，其他綁定的顯示文本也將更改，但不會調用set函數。

member.name的值始終正確顯示。

從類BasicSystemMember中刪除getter和setter函數時。 綁定也可以完美地工作。 但是我需要有一個setter功能。

<li *ngFor="let member of activeSystemMembersList">
  <div class="">{{member.name}}</div>
  <div class="">{{member.selectedConfig}}</div>
  <input type="text" class="text-input" [(ngModel)]="member.selectedConfig" />
</li>

export class BasicSystemMember implements SystemMember{
  name: string;
  private _selectedConfig: string;

  constructor(){
    this._selectedConfig = "HelloWorld"
  }

  set selectedConfig(newName) {
    this._selectedConfig = newName
  };

  get selectedConfig() {
    return this._selectedConfig
  };
 }

export class SystemMembersComponent implements OnInit {
  activeSystemMembersList: SystemMember[];

  ngOnInit(){
    this.activeSystemMemberService.getActiveSystemMembers().subscribe(
      activeSystemMembersList => this.activeSystemMembersList = activeSystemMembersList)    
  }
}

export class ActiveSystemMemberService {    
  list: SystemMember[];    

  constructor() {
    this.list = []
  }
  getActiveSystemMembers(): Observable<SystemMember[]> {
    return of(this.list)
  } 
}

Answer 1

在創建項目時，通常是在您的情況下（在您的members引起此問題。 如果要作為Http請求的一部分創建項目，則如下所示：

getMembers(): Observable<BasicSystemMember[]> {
    return this.http.get<BasicSystemMember[]>(this.Url);

然后，您實際上並沒有在數組中創建BasicSystemMember對象。 而是，Http請求正在創建看起來像BasicSystemMember對象的元素，但它們將僅具有Http請求提供的屬性（而不是方法或getter / setter）。

對於單個項目，您可以執行以下操作：

Object.assign(new BasicSystemMember(), member);

像這樣的東西行得通...但是可能可以更有效地編碼（在這里晚些時候，哈哈）。

getMembers(): Observable<BasicSystemMember[]> {
    return this.http.get<BasicSystemMember[]>(this.Url).pipe(
        map(data => {
           const newList: BasicSystemMember[] = [];
           data.forEach(item => 
                newList.push(Object.assign(new BasicSystemMember(), item)));
           return newList;
        })
     );
}

注意：我沒有測試或語法檢查此。

此代碼映射Http響應的結果。 它創建一個適當類型的數組。 然后foreach使用Object.assign遍歷數組的每個元素，以創建適當類的實例並將該項目的數據復制到其中。 然后將其推入陣列。