时间戳

首页 > 解决方案 > 如何以角度获取具有相同名称但在不同界面中的数据

javascript - 如何以角度获取具有相同名称但在不同界面中的数据

问题描述

我有两个界面，一个是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 CropFilter { // Interface 2
    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",
                
            }
        ]
    }
];

这是实际数据。我只想根据crop.filter.ts从crop.data.ts中获取数据

为了更好地清除，让我也向您展示 html 部分：

1. all-trade.html

<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>

2.crop.service.ts

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

import { Observable, of } from "rxjs";

import { Crop, CropFilter, DistrictFilter } 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)
  }

  
  getCrop(name: string): Observable<any> {
    const crop = this.crops.filter(crop => crop.name === name)[0];

    return of(crop);
  }
}

最终输出如下所示：

在此处输入图像描述

现在请指导我如何根据crop.filter.ts 从crop.data.ts 获取数据就像用户选中Rice 复选框时，它应该获取crop.data.ts 文件中存在的Rice 的所有详细信息并显示在屏幕上。

标签： javascriptangulartypescriptcheckboxfilter

解决方案

在复选框更改时，编写如下所示的事件句柄。维护哪些复选框用户已签入变量“AppliedFilter”，然后将该数组列表传递给您的服务方法。

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);
}

在基于该数组的服务方法中，过滤您的记录，如下所示。

 getCrop(names: string[]): Observable<any> {
     const crop = this.crops.filter((crop) => names.includes(crop.name));
     return of(crop);
 }

这是工作沙箱。

https://codesandbox.io/s/filter-data-x2p0w?file=/src/app/app.component.ts:289-294

推荐阅读