Angular Pipe возвращает значения, но ngFor не будет их отображать - PullRequest
Новая
       36

Angular Pipe возвращает значения, но ngFor не будет их отображать

0 голосов
/ 23 мая 2019

У меня есть канал, который фильтрует мой ngFor только по точным совпадениям, через который я прохожу, нажимая на filterargument.

Вот мой канал: 

transform(werte: any[], kriterium: string, gruppe): any[] {
    if (!werte) {
      return [];
    }
    if (!gruppe || gruppe.length === 0) {
      return werte;
    }
    return werte.filter(it =>
      it[kriterium] === gruppe);
  }

Здесь естьмой HTML: 

<mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened class="side-nav">
    <!-- <mat-card class="mat-card">Kategorien:</mat-card> -->
    <div *ngFor="let skillGruppe of skillGruppen | unique:'skillGruppe'">
      <button mat-button class="filter">
        <div (click)="filtereSkills(filter.textContent)" #filter>
          {{ skillGruppe.skillGruppe }}
        </div>
      </button>
    </div>
  </mat-drawer>
  <mat-drawer-content>
    <div *ngIf="SKILLS?.length > 0; else noItem">
      <div *ngFor="let skill of SKILLS | filter:'skillGruppe':filterWert">
        <div class="skill">
          <mat-accordion>
            <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>{{ skill.skillname }} </mat-panel-title>
                <mat-progress-bar
                  class="progress-bar"
                  [value]="skill.skillwert"
                  [color]="'accent'"
                  [mode]="'buffer'"
                ></mat-progress-bar>
                <mat-panel-description> </mat-panel-description>
              </mat-expansion-panel-header>
              <div>{{ skill.skillBeschreibung }}</div>
            </mat-expansion-panel>
          </mat-accordion>
        </div>
      </div>
    </div>
    <ng-template #noItem>
      <app-data-loader></app-data-loader>
    </ng-template>
  </mat-drawer-content>
</mat-drawer-container>

Когда я нажимаю на div с фильтром id, я изменяю значение переменной filterWert.Затем я фильтрую свой ngFor по этому значению.Странно то, что какое-то время это работало, но теперь уже нет, и я просто не понимаю, почему.Когда я отлаживаю его, я получаю значения, возвращаемые из канала, но ngFor не будет их отображать.Где моя ошибка, которую я сделал?

Ответы [ 2 ]

1 голос
/ 23 мая 2019

Вы пытаетесь выполнить операции с коллекцией в директиве *ngFor, чтобы отфильтровать коллекцию, а не выполнить ее цикл.

Приложение к угловой документации на трубы указывает, что не следует использовать операцию filter или order для директивы *ngFor через трубы. (https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe)

Что вы можете сделать, это отфильтровать ваши данные перед привязкой к вашей директиве *ngFor. Например:

component.ts 

public ngOnInit(): void {
    requestCollectionFromApi().subscribe(result => {
        skillGruppen = filter(result, 'skillGruppe');
    });
}

private filter(result: Array, unique: string): Array {
    // Process filter operation here and return new array with filtered data.
}

Затем в своем HTML удалите канал: 

<div *ngFor="let skillGruppe of skillGruppen">
  <button mat-button class="filter">
     <div (click)="filtereSkills(filter.textContent)" #filter>
         {{ skillGruppe.skillGruppe }}
      </div>
    </button>
</div>

Надеюсь, это поможет.

0 голосов
/ 23 мая 2019

Попробуйте передать вашу пару ключ-значение (параметры фильтра) как объект.

Тогда вы можете использовать что-то вроде этого 

export class FilterPipe implements PipeTransform {
    transform<T>(items: T[], filter: {key: string, value: any}): T[] {
        if (!items || !filter) {
            return items;
        }        
        return items.filter(item => item[filter['key']] == filter['value']);
    }
}
...