Question

我有一个选择组件，我这样参数：

<app-select-v2
  [formGroup]="model"
  [controlName]="'owner'"
  [options]="ownerOptions"
  [label]="'Select task\'s owner'"
  [width]="'100%'"
  [height]="'30rem'"
  [scrollFrom]="5"
></app-select-v2>

这是一个自定义选择选项列表，它获取ownerOptions数组。该数组如下所示：

ownerOptions:Option[] = [
    {name: 'name1', value: 'value1'},
    {name: 'name2', value: 'value2'}
    ...
];

一开始这是一个空数组，我想用数据填充它。 setOwnerOptions（）函数用于填充。我在ngOnInit（）

中调用它

setOwnerOptions(){ 
    this._calendar.getActiveUsers().subscribe((names:string[]) => {
      for(var i:number = 0; i<names.length; i++){
        var _option = new Option();
        this._calendar.getUserFullName(names[i]).subscribe((fullname:string) =>{
          _option.name = fullname;
          _option.value = names[i];
          this.ownerOptions.push(_option);
        });
      }
    });
  }

（我知道这不是从api获取id（name）和full_names的最好方法。我将很快重写这部分。）getActiveUsers（）和getUserFullName（name：string）函数工作正常。我从api获取请求的数据，循环将其推送到ownerOptions数组。但重点是视图没有更新，在订阅之外，ownerOptions仍然是一个空数组，因为angular不会注意到更改。有人可以帮我这个吗？我有这方面的经验：/ （我尝试创建一个区域并使用changeRef运行脚本，但它对我来说也是一样的。）

感谢您的回答和时间：）

Answer 1

问题在于：

_option.value = names[i];

此时i等于names.length - 1所有订阅。它确实不是最好的代码，但很难看到你真正想要实现的目标，所以要解决你的问题，你可以将其更改为此。通过使用forEach循环可以防止出现此问题：

setOwnerOptions(){ 
  this._calendar.getActiveUsers().subscribe(names => {
    names.forEach(name => 
      this._calendar.getUserFullName(name).subscribe(fullname => {
        let option = new Option();
        option.name = fullname;
        option.value = name;
        this.ownerOptions.push(_option);
    })
  })
}

不完全确定，但我相信您也可以使用let中的for loop关键字而不是var来修复此问题。实际上，除非你真的知道自己在做什么，否则你应该永远使用var关键字，即便如此你也知道不要使用它

Answer 2

在您的子组件中实施OnChanges：

export class SelectV2 implements OnInit, OnChanges {
  // ...
  ngOnChanges(change: SimpleChange) {
    console.log(change);
  }
}

每次Input更改其值时，都会触发此方法。

Answer 3

尝试将项目推送到本地数组，然后设置this.ownerOptions = myArray

订阅中更改的angular 4 @Input参数不会更新视图

3 个答案: