Javascript 如何在数据库中获取同名不同接口的数据
我有两个接口，一个是cropFilter，用于复选框过滤器，第二个接口保存我的数据，称为Crop 让我分享我的代码，以便更好地理解 1。crop.model.tsJavascript 如何在数据库中获取同名不同接口的数据,javascript,angular,typescript,checkbox,filter,Javascript,Angular,Typescript,Checkbox,Filter,我有两个接口，一个是cropFilter，用于复选框过滤器，第二个接口保存我的数据，称为Crop 让我分享我的代码，以便更好地理解 1。crop.model.ts export class Crop { // Interface 1 name: string; district: string subCategory: Subcategory[]; } export class Subcategory { id: number; name: string
export class Crop { // Interface 1
name: string;
district: string
subCategory: Subcategory[];
}
export class Subcategory {
id: number;
name: string;
}
export class CropFilter { // Interface 2
name: string
checked: boolean
}
import { CropFilter } from "./crop.model";
export const CROPSFILTER: CropFilter[] = [
{
name: "Rice",
checked: false
}, {
name: "Wheat",
checked: false
}, {
name: "Barley",
checked: false
}
]
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",
}
]
}
];
onChange(status, name) {
if (status && this.appliedFilter.indexOf(name) === -1) {
this.appliedFilter.push(name);
} else {
this.appliedFilter = this.appliedFilter.filter((x) => x !== name);
}
this.crops$ = this.cropService.getCrop(this.appliedFilter);
}
export class Crop { // Interface 1
name: string;
district: string
subCategory: Subcategory[];
}
export class Subcategory {
id: number;
name: string;
}
export class CropFilter { // Interface 2
name: string
checked: boolean
}
import { CropFilter } from "./crop.model";
export const CROPSFILTER: CropFilter[] = [
{
name: "Rice",
checked: false
}, {
name: "Wheat",
checked: false
}, {
name: "Barley",
checked: false
}
]
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",
}
]
}
];
onChange(status, name) {
if (status && this.appliedFilter.indexOf(name) === -1) {
this.appliedFilter.push(name);
} else {
this.appliedFilter = this.appliedFilter.filter((x) => x !== name);
}
this.crops$ = this.cropService.getCrop(this.appliedFilter);
}
export class Crop { // Interface 1
name: string;
district: string
subCategory: Subcategory[];
}
export class Subcategory {
id: number;
name: string;
}
export class CropFilter { // Interface 2
name: string
checked: boolean
}
import { CropFilter } from "./crop.model";
export const CROPSFILTER: CropFilter[] = [
{
name: "Rice",
checked: false
}, {
name: "Wheat",
checked: false
}, {
name: "Barley",
checked: false
}
]
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",
}
]
}
];
onChange(status, name) {
if (status && this.appliedFilter.indexOf(name) === -1) {
this.appliedFilter.push(name);
} else {
this.appliedFilter = this.appliedFilter.filter((x) => x !== name);
}
this.crops$ = this.cropService.getCrop(this.appliedFilter);
}
export class Crop { // Interface 1
name: string;
district: string
subCategory: Subcategory[];
}
export class Subcategory {
id: number;
name: string;
}
export class CropFilter { // Interface 2
name: string
checked: boolean
}
import { CropFilter } from "./crop.model";
export const CROPSFILTER: CropFilter[] = [
{
name: "Rice",
checked: false
}, {
name: "Wheat",
checked: false
}, {
name: "Barley",
checked: false
}
]
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",
}
]
}
];
onChange(status, name) {
if (status && this.appliedFilter.indexOf(name) === -1) {
this.appliedFilter.push(name);
} else {
this.appliedFilter = this.appliedFilter.filter((x) => x !== name);
}
this.crops$ = this.cropService.getCrop(this.appliedFilter);
}
<div class="container" *ngIf="crops$ | async">
<div *ngFor="let item of cropFilterCheckbox$ | async; let i = index">
<mat-checkbox [checked]="item.checked" (change)="onChange($event, i, item)">
{{ item.name }}
</mat-checkbox>
</div>
<br />
<h4>JSON data:</h4>
<pre>
{{ cropFilterCheckbox$ | async | json }}
<div *ngFor="let crop of cropFilterCheckbox$ | async"
[hidden]="!crop.checked"
>{{ crop.name }}
</div>
<button type="button" class="btn">Basic</button>
</pre>
</div>
{{item.name}
JSON数据：
{{cropFilterCheckbox$| async | json}
{{crop.name}
基本的
export class Crop { // Interface 1
name: string;
district: string
subCategory: Subcategory[];
}
export class Subcategory {
id: number;
name: string;
}
export class CropFilter { // Interface 2
name: string
checked: boolean
}
import { CropFilter } from "./crop.model";
export const CROPSFILTER: CropFilter[] = [
{
name: "Rice",
checked: false
}, {
name: "Wheat",
checked: false
}, {
name: "Barley",
checked: false
}
]
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",
}
]
}
];
onChange(status, name) {
if (status && this.appliedFilter.indexOf(name) === -1) {
this.appliedFilter.push(name);
} else {
this.appliedFilter = this.appliedFilter.filter((x) => x !== name);
}
this.crops$ = this.cropService.getCrop(this.appliedFilter);
}
从“@angular/core”导入{Injectable}；
从“rxjs”导入{可观察的}；
从“./shared/Crop.model”导入{Crop，CropFilter，DistrictFilter}；
从“./shared/crop.data”导入{CROPS}；
从“../shared/cropFilter”导入{CROPSFILTER}；
@注射的({
提供于：“根”
})
出口级农产品服务{
构造函数（）{}
作物：作物[]=作物；
cropFilterCheckbox:CropFilter[]=CropFilter；
getAllCrops（）：可观察{
归还（这是农作物）；
}
getCropFilter（）：可观察{
返回（此.cropFilterCheckbox）
}
getCrop（名称：string）：可观察
现在，请指导我如何基于crop.filter.ts从crop.data.ts获取数据
与用户选中Rice复选框时一样，its应获取crop.data.ts文件中存在的Rice的所有详细信息并显示在屏幕上。在复选框更改时，编写如下事件句柄。维护用户在变量“AppliedFilter”中选中的复选框，然后将该数组列表传递给您的服务方法
getCrop(names: string[]): Observable<any> {
const crop = this.crops.filter((crop) => names.includes(crop.name));
return of(crop);
}
在基于该数组的服务方法中，按如下方式过滤记录
getCrop（name:string[]）：在复选框更改上可观察到的编写一个事件句柄，如下所示。维护用户在变量“AppliedFilter”中选中的复选框，然后将该数组列表传递给您的服务方法
getCrop(names: string[]): Observable<any> {
const crop = this.crops.filter((crop) => names.includes(crop.name));
return of(crop);
}
在基于该数组的服务方法中，按如下方式过滤记录
getCrop（name:string[]）：可观察的当用户单击复选框时，您可以根据名称筛选作物数据。如何编码当用户单击复选框时，您可以根据名称筛选作物数据。如何编码