I want to create a mat-checkbox change event, which can show or hide the cards

Here I am sharing my Angular Code:

1. app-component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-all-trades',
  templateUrl: './all-trades.component.html',
  styleUrls: ['./all-trades.component.css']
})
export class AllTradesComponent implements OnInit {
  
// Arrays of Object
  crops = [
  {
    name:'Rice',
    checked: false
  },
  {
    name:'Wheat',
   checked : false
},
  {
    name:'Barley',
    checked : false
  },
  {
    name:'Soyabean',
    checked : false
  },
  ];
 

  constructor() { }

  

  ngOnInit(): void {
  }


// Here I tried the logic but its not working

onChange(event, index, item) {
  item.checked = ! item.checked
    console.log(index, event, item);
  }

}

2. app-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; let i = index">
              <mat-checkbox
                [checked]="item.checked"
                (change)="onChange($event, i, item)"
              >
                
              </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 district of districts">
              <mat-checkbox>
                
              </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"
    >
      <mat-card-header>
        <img
          mat-card-avatar
          class="example-header-image"
          src="/assets/icons/crops/.PNG"
          alt="crop-image"
        />
        <mat-card-title></mat-card-title>
        <mat-card-subtitle>100 Kgs</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>PRICE</p>
      </mat-card-content>
    </mat-card>
  </div>
</div>

<app-footer></app-footer>

Here I shared my output window, as you guys can see on left hand side I have created mat-checkbox, all I need to do is that when I check the "RICE" box its should only show the RICE CARD and when I check Wheat then only Wheat Card.