Ng-select не будет отображать выбранный элемент с @viewChild и Observable - PullRequest
Новая
       24

Ng-select не будет отображать выбранный элемент с @viewChild и Observable

1 голос
/ 09 июня 2019

СПРАВКА: После того, как пользователь вернулся с 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)

1 Ответ

1 голос
/ 09 июня 2019

@ ViewChild внедряет переменную только тогда, когда она видна.Если он невидим, то он не существует в DOM, поэтому ссылочная переменная будет иметь значение null.

Использовать FormControl вместо @ViewChild.

...