问题
My webpage :
Here you can see on left hand side I have set of checkboxes but also there are some repeated names which I dont want, Here you can see Rice is repeated twice but I want it should display only Once . After checking Rice checkbox its should display all the cards which have name as Rice but different District name. Here I want filtering.
Also I am sharing my code base with you guys please help me.
1. crop.model.ts
export class Crop {
name: string;
checked: boolean;
district: string
subCategory: Subcategory[];
}
export class Subcategory {
id: number;
name: string;
checked: boolean;
}
2. crop.data.ts
import { Crop } from "./crop.model";
export const CROPS: Crop[] = [
{
name: "Rice", // I want this Rice
checked: true,
district: "Thane",
subCategory: [
{
id: 1,
name: "Basmati",
checked: true
},
{
id: 2,
name: "Ammamore",
checked: true
}
]
}, {
name: "Rice", // also this one but on clicking on single Checkbox with name as Rice
checked: true,
district: "Nashik ",
subCategory: [
{
id: 1,
name: "Basmati",
checked: true
},
{
id: 2,
name: "Ammamore",
checked: true
}
]
},
{
name: "Wheat",
checked: true,
district: "Nashik",
subCategory: [
{
id: 1,
name: "Durum",
checked: true
},
{
id: 2,
name: "Emmer",
checked: true
}
]
},
{
name: "Barley",
checked: true,
district: "Ratnagiri",
subCategory: [
{
id: 1,
name: "Hulless Barley",
checked: true
},
{
id: 2,
name: "Barley Flakes",
checked: true
}
]
}
];
3. crop.service.ts
import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";
import { Crop } from "../shared/crop.model";
import { CROPS } from "../shared/crop.data";
@Injectable({
providedIn: "root"
})
export class CropService {
constructor() { }
crops: Crop[] = CROPS;
getAllCrops(): Observable<Crop[]> {
return of(this.crops);
}
getCrop(name: string): Observable<any> {
const crop = this.crops.filter(crop => crop.name === name)[0];
return of(crop);
}
}
4. all-trades.component.html
<app-header></app-header>
<div
fxLayout="row"
fxLayout.lt-md="column"
fxLayoutAlign="space-between start"
fxLayoutAlign.lt-md="start stretch"
>
<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 crop of crops$ | async">
<mat-checkbox
[checked]="crop.checked"
(change)="onChange($event, i, crop)"
>
{{ crop.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 crop of crops$ | async">
<mat-checkbox
[checked]="crop.checked"
(change)="onChange($event, i, crop)"
>
{{ crop.district }}
</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"
[hidden]="!crop.checked"
>
<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>
<app-footer></app-footer>
5. all-trades.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Crop } from 'src/app/shared/crop.model';
import { CropService } from '../crop.service';
@Component({
selector: 'app-all-trades',
templateUrl: './all-trades.component.html',
styleUrls: ['./all-trades.component.css'],
})
export class AllTradesComponent implements OnInit {
crops$: Observable<Crop[]>;
constructor(private cropService: CropService) { }
ngOnInit(): void {
this.crops$ = this.cropService.getAllCrops();
}
onChange(event, index, item) {
item.checked = !item.checked;
console.log(index, event, item);
}
}
回答1:
A better structure of your crop data according to your need would be :-
crop.data.ts
import { Crop } from "./crop.model";
export const CROPS: Crop[] = [
{
name: "Rice", // I want this Rice
checked: true,
crops: [{
district: "Thane",
subCategory: [
{
id: 1,
name: "Basmati",
checked: true
},
{
id: 2,
name: "Ammamore",
checked: true
}]
},
{
district: "Nashik",
subCategory: [
{
id: 1,
name: "Basmati",
checked: true
},
{
id: 2,
name: "Ammamore",
checked: true
}]
}
},
{
name: "Wheat",
checked: true,
crops: [{
district: "Nashik",
subCategory: [
{
id: 1,
name: "Durum",
checked: true
},
{
id: 2,
name: "Emmer",
checked: true
}
]
}]
},
{
name: "Barley",
checked: true,
crops: [{
district: "Ratnagiri",
subCategory: [
{
id: 1,
name: "Hulless Barley",
checked: true
},
{
id: 2,
name: "Barley Flakes",
checked: true
}
]
}]
}
];
Also you can keep districts array instead of districts field if subcategories for a particular crops are always same. Else you can go for this approach which i have shown. And You UI can be modiefied according to crops data i have shared accordingly.
来源：https://stackoverflow.com/questions/64892181/i-want-to-add-filter-in-my-array-of-object-i-do-not-want-duplicate-check-box