Фильтр доступа, результат Angular 6 - PullRequest
Новая
       10

Фильтр доступа, результат Angular 6

0 голосов
/ 30 ноября 2018

Как мне получить доступ к filteredArray в моем компоненте .ts?Потому что сейчас он доступен только внутри ng-container. 

<ng-container *ngIf="(userList | filter: 'name' : value) as filteredArray">
    <tr *ngFor="let user of filteredArray">
        <td>{{user.name}}</td>
        <td>{{user.group}}</td>
    </tr>

    <div>Count: {{ filteredArray.length }}</div>
</ng-container>

Как я могу изменить код, чтобы получить то, что я хочу?Спасибо за ваше время!

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

Избегайте следующих действий .... но это работает в демонстрационных целях ?

Создайте компонент (например, demo-element.component.ts), который занимает один @Input() value:any

Добавьте этот новый компонент в качестве первого дочернего элемента <ng-container> и дайте ему ссылку на шаблон #containerRef например: 

<ng-container *ngIf="(userList | filter: 'name' : value) as filteredArray">
    <demo-element #containerRef [value]="filteredArray"></demo-element>

В вашем основном компоненте добавьте 

@ViewChild('containerRef') ref;

ngAfterViewInit() {
   this.filteredArray = this.ref.value; // Terrible pattern, but answers the question:-)
}
0 голосов
/ 30 ноября 2018

Чтобы ответить на ваш вопрос напрямую: это невозможно так, как вы это описываете.Но читайте дальше.

Трубы (иногда их еще называют «фильтрами») следует использовать только для форматирования данных, то есть для подготовки их в удобочитаемой форме.Например, встроенная труба date может использоваться для преобразования строки ISO в строку, такую ​​как «21 марта 1995 года», то есть то, как человек из США может ожидать прочитать дату.

То, как вы используете трубы, не рекомендуется, именно из-за вашего вопроса.По сути, вы поместили логику приложения в шаблон, который является анти-шаблоном и имеет цель иметь простые для чтения декларативные шаблоны, которые Angular использует, чтобы выяснить, как обновить DOM.

Вы должны переместить логику фильтрации обратно в класс.Например, вместо установки this.userList = xxx у вас может быть функция, которую вы вызываете каждый раз, например, this.changeUserList(xxx). 

changeUserList (list) {
  this.userList = list
  this.filteredArray = list.filter(...)
}

Вы также можете поместить эту логику в установщик, который позволяет вамзапускать пользовательский код, когда вы пишете обычный this.userList = list, но вам понадобится отдельное (обычно префиксное частное) свойство класса, в котором вы на самом деле сохраните значение.На самом деле это не ограничение, поскольку у вас также может быть тривиальный геттер, поэтому вы все равно можете использовать this.userList обычно как геттер, не забывая использовать this._userList, по сути, убирая это как детали реализации пары get / set. 

private _userList

public set userList (list) {
  this._userList = list
  this.filteredArray = list.filter(...)
}

public get userList (list) { return this._userList }

Наблюдения могут действительно пригодиться и здесь, поскольку вы можете просто rx.map от userList$ до filteredArray$ с Array#filter. 

public userList$
public filteredArray$ = this.userList$.pipe(map(arr => arr.filter(...))

Тогда вВ шаблоне можно использовать async pipe. 

*ngIf="filteredArray$ | async as filteredArray"
...