angular - 未从模型调用 Setter/getter

Question

我有一个问题，即双向绑定(bind)无法正常工作，我认为 getter 和 setter 方法是问题所在。

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

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

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

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