未从模型调用 Setter/getter

Question

我有一个问题，双向绑定不能正常工作，我认为 getter 和 setter 方法是问题所在。

正如您在示例中看到的那样，我member.selectedConfig两次使用了 data 属性。我认为，当加载组件时，它们的值都应该是，"HelloWorld"但它们都不是。

当我开始手动更改文本框的值时，其他绑定的显示文本也会更改，但不会调用 set 函数。

member.name 的值始终正确显示。

当类中的 getter 和 setter 函数BasicSystemMember被删除时。绑定也很完美。但是我需要一个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 遍历数组的每个元素以创建适当类的实例并将项目的数据复制到其中。然后它把它推到阵列上。