我想在我的对象数组中添加过滤器....我不想重复相同的复选框 [英] I want to add filter in my array of object.... I do not want duplicate check boxes with same same
问题描述
我的网页:
在这里您可以在左侧看到我的复选框集，但是我不想要有一些重复的名字，在这里您可以看到米重复两次，但我希望它仅显示一次.选中"Rice"复选框后，其应显示所有名称为"Rice"但地区名称不同的卡.在这里我要过滤.
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);
}
}
推荐答案
根据您的需要，更好的作物数据结构是:-
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
}
]
}]
}
];
如果特定农作物的子类别始终相同，则还可以保留地区数组而不是地区字段.否则，您可以采用我所展示的这种方法.可以根据我相应共享的农作物数据修改You UI.
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.
这篇关于我想在我的对象数组中添加过滤器....我不想重复相同的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
