首页 文章

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

提问于
浏览 次
1

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

<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运行脚本，但它对我来说也是一样的 . ）

谢谢你的答案和时间:)

angular

3 回答

  • 1

    在您的子组件中实现 OnChanges ：

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

    每当 Input 的值发生变化时，都会触发此方法 .

    回复于
  • 1

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

    回复于
  • 2

    问题出在这里：

    _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);
    })
  })
}

    不完全确定，但我相信您也可以通过使用 for loop 中的 let 关键字而不是 var 来修复它 . 实际上，你应该 - 只要 - 使用 var 关键字，除非你真的知道你在做什么，即使你知道不要使用它

    回复于

相关问题