Question

我遇到双向绑定无法正常工作的问题，我认为getter和setter方法是问题所在。

正如您在示例中看到的，我使用了数据属性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);

像这样的东西会起作用......但可能会更有效地编码（在这里LOL很晚）。

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响应的结果。它创建一个适当类型的数组。然后使用Object.assign遍历数组的每个元素，以创建相应类的实例并将项目的数据复制到其中。然后它将它推到阵列上。

没有从模型中调用Setter / getter

1 个答案: