Question

我想知道如何以编程方式过滤角度列表。

我正在研究项目，我需要通过单击类别来过滤子类别。

例如，通过单击我需要显示的饮料：可乐，芬达，百事可乐...

然后通过单击组，我正在过滤子组，但是它可以工作，但是我想在加载.html时手动设置它，例如，以产生与用户按类别分类相同的效果。

这是我的代码：

 filteredSubGroups: Group[];



 ngOnInit() {
    // Here I get values from DB and when I console.log them, they are there, so this is allright.

    this.groups = this._activatedRoute.snapshot.data['groups'];
    this.subGroups = this._activatedRoute.snapshot.data['subGroups'];
  }

  ngAfterViewInit() {
    this.selectedId = '78ebcad8-8cb0-4172-8cd8-bb6fb6b3bf53';
    // setTimeout(() => { // set time out to avoid error ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked
    //  this.filteredSubGroups = this.subGroups.filter(item => item.parentId === "78ebcad8-8cb0-4172-8cd8-bb6fb6b3bf53");
    //}, 5);

    // Here is list which is source to my subcategories  
    this.filteredSubGroups = this.subGroups.filter(item => item.parentId === "78ebcad8-8cb0-4172-8cd8-bb6fb6b3bf53");
  }

这是我的模板：

<li *ngFor="let subgroup of filteredSubGroups">
        <button type="button" data-toggle="" data-target="" class="btn categories-btn" (click)="getArticlesByGroupId(subgroup.id)" [class.active]="subgroup.id == selectedSubId">
            {{subgroup.title | uppercase}}
        </button>
    </li>

但是当我运行应用程序时，出现下一个错误：

错误错误：ExpressionChangedAfterItHasBeenCheckedError：表达检查后已更改。先前的值：'ngForOf：未定义”。当前值：'ngForOf：[object Object]，[object 对象]，[对象对象]'。在viewDebugError（core.js：9817）在expressionChangedAfterItHasBeenCheckedError（core.js：9795）在checkBindingNoChanges（core.js：9962）在checkNoChangesNodeInline（core.js：14010）在checkNoChangesNode（core.js：13984）在debugCheckNoChangesNode（core.js：14813）在debugCheckDirectivesFn（core.js：14715）在Object.eval [作为updateDirectives]（MyComponent.html：38）在Object.debugUpdateDirectives [作为updateDirectives]（core.js：14697）在checkNoChangesView（core.js：13822）

编辑：

通过单击主要类别，将显示子类别：

  <li *ngFor="let group of groups;let isFirst = first" (click)="filterSubgroupsByGroupId(group.id)">
      <button type="button" data-toggle="tab" data-target="#food" class="btn xbutton-square" [class.active]="group.id == selectedId">
        <i [class]="getClass(group.image)" [innerHTML]="getUnicode(group.image)"></i>
      </button>
    </li>

我只想在运行应用程序时手动/以编程方式显示类别，而无需真正单击类别..之后用户可以单击所需的任何地方。

Answer 1

如果将ngAfterViewInit更改为ngAfterContentInit，应该可以使用

Answer 2

好，这是应该的样子：

1）从Angular / Core导入changeDetectorReference 2）像这样将其注入到构造函数中

constructor (cdr: ChangeDetectorReference){}

filteredSubGroups: Group[];



 ngOnInit() {
    this.groups = this._activatedRoute.snapshot.data['groups'];
    this.subGroups = this._activatedRoute.snapshot.data['subGroups'];
    this.selectedId = '78ebcad8-8cb0-4172-8cd8-bb6fb6b3bf53';
    this.filteredSubGroups = this.subGroups.filter(item => item.parentId === this.selectedId);
    this.cdr.detectChanges();
  }

因此，在初始化视图之前，现在有了您的filteredSubGroups。因此该错误将不再出现。

如何以编程方式过滤角度列表

2 个答案: