Angular 根据复选框值类型获取值列表

这里我有带有复选框的项目名称，我想显示基于复选框值类型的值列表

HTML

<div class="pb-1" *ngFor="let item of Typename">
          <mat-checkbox>{{item.type}}</mat-checkbox>
       </div>
      <div class="pb-2" *ngFor="let product of allprod">
        {{produc.name}}
      </div>

---

我想根据选中的复选框值类型显示值，您可以在finder方法中放入一个过滤器，如下所示：

const type=checkboxType；
this.testservice.getall（）
.烟斗(
过滤器（（e）=>e.type===checkboxType）
)
.订阅（（数据：any[]）=>{
this.allprod=数据；
log（'submit Post click happend'+JSON.stringify（this.allprod））；
});
}

---

这就是您的想法吗？

您可以在finder方法中添加一个过滤器，如下所示：

const type=checkboxType；
this.testservice.getall（）
.烟斗(
过滤器（（e）=>e.type===checkboxType）
)
.订阅（（数据：any[]）=>{
this.allprod=数据；
log（'submit Post click happend'+JSON.stringify（this.allprod））；
});
}

这就是你的想法吗？

{{item.type}
{{produc.name}

每个项目的

已选中

属性都绑定到

复选框

。 我们将筛选所选类型中包含产品类型的

allprod

。

{{item.type}
{{produc.name}

每个项目的

已选中

属性都绑定到

复选框

。

---

我们将筛选<>代码> Alpoud ，产品类型包含在所选类型中。

< P>请考虑预先分组数据。（以lodash为例）

然后在模板中

<ng-container *ngFor="let item of Typename">
  <div class="pb-1">
    <mat-checkbox>{{item.type}}</mat-checkbox>
  </div>
  <div class="pb-2" *ngFor="let product of allprod[item.type]">
    {{product.name}}
  </div>
</ng-container>

{{item.type}
{{product.name}
 > P>请考虑预先分组数据。（以lodash为例）

然后在模板中

<ng-container *ngFor="let item of Typename">
  <div class="pb-1">
    <mat-checkbox>{{item.type}}</mat-checkbox>
  </div>
  <div class="pb-2" *ngFor="let product of allprod[item.type]">
    {{product.name}}
  </div>
</ng-container>


{{item.type}
{{product.name}
基于复选框值，我们希望显示类型值筛选器将执行此操作-它将仅显示与复选框值匹配的值基于复选框值，我们希望显示类型值筛选器将执行此操作-它将仅显示与复选框值匹配的值模板表达式中的函数调用被视为错误应该避免练习和练习。进一步阅读获取错误属性“checked”在模板表达式中的typeFunction调用上不存在被认为是不好的做法，应该避免。进一步读取获取错误属性“checked”在类型上不存在
import { groupBy } from 'lodash';

this.testservice.getall().subscribe((data: any[]) => {
  this.allprod = groupBy(data, 'type');
  // this.allprod is now an object with type values as key and arrays as values
});

<ng-container *ngFor="let item of Typename">
  <div class="pb-1">
    <mat-checkbox>{{item.type}}</mat-checkbox>
  </div>
  <div class="pb-2" *ngFor="let product of allprod[item.type]">
    {{product.name}}
  </div>
</ng-container>