我想以角度制作复选框过滤器

Question

这里分享我项目的输出窗口

enter image description here

如您所见，我在左侧有一个复选框，在右侧有一个卡片，当我选中复选框时，我想要它应该显示检查元素，其余元素应该隐藏，就像我检查时一样 RICE 它应该只显示 RICE 相关数据的结果。

代码如下：

1.crop.model.ts

export class Crop {
    name: string;
    district: string
    subCategory: Subcategory[];
}

export class Subcategory {
    id: number;
    name: string;
   
}

export class CropFilter {
    name: string
    checked: boolean
}

export class DistrictFilter {
    name: string
    checked: boolean
}

2。 CropFilter.ts

import { CropFilter } from "./crop.model";


export const CROPSFILTER: CropFilter[] = [
    {
        name: "Rice",
        checked: false
    }, {
        name: "Wheat",
        checked: false
    }, {
        name: "Barley",
        checked: false
    }
]

3. crop.data.ts

import { Crop } from "./crop.model";

export const CROPS: Crop[] = [
    {
        name: "Rice",
        district: "Thane",
        subCategory: [
            {
                id: 1,
                name: "Basmati",
                
            },
            {
                id: 2,
                name: "Ammamore",
                
            }
        ]
    },
    {
        name: "Rice",
       
        district: "Nashik",
        subCategory: [
            {
                id: 1,
                name: "Basmati",
               
            },
            {
                id: 2,
                name: "Ammamore",
                
            }
        ]
    },
    {
        name: "Wheat",
        
        district: "Nashik",
        subCategory: [
            {
                id: 1,
                name: "Durum",
                
            },
            {
                id: 2,
                name: "Emmer",
                
            }
        ]
    },
    {
        name: "Barley",
        
        district: "Ratnagiri",
        subCategory: [
            {
                id: 1,
                name: "Hulless Barley",
               
            },
            {
                id: 2,
                name: "Barley Flakes",
                
            }
        ]
    },
    {
        name: "Barley",
        
        district: "Thane",
        subCategory: [
            {
                id: 1,
                name: "Hulless Barley",
                
            },
            {
                id: 2,
                name: "Barley Flakes",
                
            }
        ]
    }
];

4. crop.service.ts

import { Injectable } from "@angular/core";

import { Observable, of } from "rxjs";

import { Crop, CropFilter, } from "../shared/crop.model";
import { CROPS } from "../shared/crop.data";
import { CROPSFILTER } from '../shared/cropFilter';


@Injectable({
  providedIn: "root"
})
export class CropService {
  constructor() { }

  crops: Crop[] = CROPS;
  cropFilterCheckbox: CropFilter[] = CROPSFILTER;

  getAllCrops(): Observable<Crop[]> {
    return of(this.crops);
  }

  getCropFilter(): Observable<CropFilter[]> {
    return of(this.cropFilterCheckbox)
  }

  
  
  }
}

5. all-trade.component.ts

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Crop, CropFilter, DistrictFilter } from 'src/app/shared/crop.model';
import { CropService } from '../crop.service';



@Component({
  selector: 'app-all-trades-copy',
  templateUrl: './all-trades.component.html',
  styleUrls: ['./all-trades.component.css']
})
export class AllTradesCopyComponent implements OnInit {

  crops$: Observable<Crop[]>;
  cropFilterCheckbox$: Observable<CropFilter[]>
  districtFilterCheckbox$: Observable<DistrictFilter[]>

  constructor(private cropService: CropService) { }

  ngOnInit(): void {
    this.crops$ = this.cropService.getAllCrops()
    console.log(this.crops$);

    this.cropFilterCheckbox$ = this.cropService.getCropFilter()


  }

}

6. all-trade.component.html

<div
  fxLayout="row"
  fxLayout.lt-md="column"
  fxLayoutAlign="space-between start"
  fxLayoutAlign.lt-md="start stretch"
  *ngIf="crops$ | async"
>
  <div class="container-outer" fxFlex="20">
    <div class="filters">
      <section class="example-section">
        <span class="example-list-section">
          <h1>Select Crop</h1>
        </span>
        <span class="example-list-section">
          <ul>
            <li *ngFor="let filter of cropFilterCheckbox$ | async">
              <mat-checkbox [checked]="filter.checked">
                {{ filter.name }}
              </mat-checkbox>
            </li>
          </ul>
        </span>
      </section>

      <section class="example-section">
        <span class="example-list-section">
          <h1>Select District</h1>
        </span>
        <span class="example-list-section">
          <ul>
            <li *ngFor="let filter of districtFilterCheckbox$ | async">
              <mat-checkbox [checked]="filter.checked">
                {{ filter.name }}
              </mat-checkbox>
            </li>
          </ul>
        </span>
      </section>
    </div>
  </div>
  <div class="content container-outer" fxFlex="80">
    <mat-card
      class="crop-card"
      style="min-width: 17%"
      *ngFor="let crop of crops$ | async"
    >
      <a [routerLink]="[crop.name]">
        <mat-card-header>
          <img
            mat-card-avatar
            class="example-header-image"
            src="/assets/icons/crops/{{ crop.name }}.PNG"
            alt="crop-image"
          />
          <mat-card-title>{{ crop.name }}</mat-card-title>
          <mat-card-subtitle>100 Kgs</mat-card-subtitle>
        </mat-card-header>
      </a>
      <mat-card-content>
        <p>PRICE</p>
      </mat-card-content>
      <mat-card-content>
        <!-- <p>{{ crop.district }}</p> -->
      </mat-card-content>
    </mat-card>
  </div>
</div>

Answer 1

如果你能提供上述代码的演示会更好。 虽然这是我的建议：

当您显示 CROPS 时，您可以根据您的复选框选择应用过滤管道。此链接How to apply filters to *ngFor? 的已接受答案将对您的问题进行排序。