How to fetch data with same name but in different interface in angular

I have two interface, one is cropFilter which is for checkbox filter and second interface is holding my data called Crop.

let me share my code for better understanding.

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

The above interface is for checkbox filtration.

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",
                
            }
        ]
    }
];

This is the actual data. All I want to fetch data from crop.data.ts based on crop.filter.ts

for better clearance let me show you the html part as well :

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)">
      
    </mat-checkbox>
  </div>

  <br />

  <h4>JSON data:</h4>

  <pre>
  
  <div *ngFor="let crop of cropFilterCheckbox$ | async"
  [hidden]="!crop.checked"
  >
  
</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);
  }
}

The final output looks like this :

Now please guide me how to fetch data from crop.data.ts based on crop.filter.ts Like when user check Rice checkbox, its should fetch all the details of Rice present in crop.data.ts file and display on the screen.