Question

帮助：用户从details/:uuid浏览回来后，请记住并显示在上面输入url之前选择的过滤器。我在显示“记住的”过滤器时遇到困难。我不想使用FormControlName/ngModel

过滤器类似于：

<ng-select
       #ngSelect
       (change)="onSomeEvent($event)"
       (clear)="returnToInitialTableState()"
       [items]="someItems"
       bindLabel="name"
       bindValue="id"
       labelForId="state"
       placeholder="Someting"
       clearAllText="Clear">
</ng-select>

...

@ViewChild(NgSelectComponent) ngSelect: NgSelectComponent

ngOnInit() {
  this.getSomeItems();
  this.locationSubscription = this.location.subscribe(x => {
    if(x.type == 'popstate' && x.url == '/some/url') {
       this.subscribeToFilterObservable();
    }
 })
}


this.subscribeToFilterObservable() { 
  this.someFilterBehaviorSubject.filterObservable.subscribe(
      data => {
         this.observableFilterOne = data.filterId;
         if(this.observableFilterOne) {
           var a =this.ngSelect.itemsList
                               .findItem(this.observableFilterOne);
           if(a){
             this.ngSelect.itemsList.select(a)
             console.log(this.ngSelect.itemsList.selectedItems);
           }
      }
  })
}

当尝试在ng-select事件和ts方法内部记录选定的一个时，不幸的是得到了相同的结果。最令人困扰的是，他们两个都有selected = true，这会导致问题更改检测（在我看来）或角度生命周期错误：

//(change)="onSomeEvent($event)"
onSomeEvent(event) {
  console.log(this.ngSelect.itemsList.selectedItems)
}

...

this.subscribeToFilterObservable() { 
 ...
 console.log(this.ngSelect.itemsList.selectedItems)
}

浏览器控制台

0:
  disabled: undefined
  htmlId: "a2c971f2062e"
  index: 5
  label: "NANII"
  marked: false
  selected: true
  value: {
    id: "7f612ba9-be1c-4ac3-a0c8-952688ceb7a8", name: "OmaeWaMouShindeiru"
  }
  __proto__: Object
  length: 1
  __proto__: Array(0)

Answer 1

@ViewChild仅在可见时注入变量。如果它是不可见的，则它在DOM中不存在，因此引用变量将为null。

使用 FormControl 代替 @ViewChild 。

Ng-select不会显示带有@viewChild和Observable的选定项目

1 个答案: