Angular 角度管道返回值，但ngFor won'；我不能展示它们

我有一个管道，它可以过滤我的NGF，只需要精确匹配，我可以通过点击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>

{{skillGruppe.skillGruppe}}
{{skill.skillname}
{{skill.skillBeschreibung}}

---

当我用id过滤器单击div时，我更改了变量filterWert的值。然后我用这个值过滤我的NGF。奇怪的是，它工作了一段时间，但现在不再是了，我只是不明白为什么。当我调试它时，我得到了从管道返回的值，但是ngFor不会显示它们。我犯的错误在哪里？

尝试将您的键值对（过滤器的参数）作为对象传递

那么你可以用这样的东西

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']);
    }
}

导出类FilterPipe实现PipeTransform{
转换（items:T[]，filter:{key:string，value:any}）：T[]{
如果（！items | |！过滤器）{
退货项目；
}        
返回items.filter（item=>item[filter['key']]==filter['value']）；
}
}

您正试图在

*ngFor

指令中对集合进行操作，以便筛选集合而不是循环遍历它

管道上的角度文档附录规定，在管道上的

*ngFor

指令上不使用

过滤器

或

顺序

操作。（）

您可以做的是在将数据绑定到

*ngFor

指令之前过滤数据。例如：

组件技术 然后在HTML中，删除管道：

{{skillGruppe.skillGruppe}}

---

希望能有帮助。

@trichetriche这不是真的有帮助。它不应该有帮助，它应该告诉你你实施了一个糟糕的设计。如果你想要一些有用的东西，那么考虑提供一个复制你的问题。

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.
}