我想创建一个 mat-checkbox 更改事件，它可以显示或隐藏卡片

Question

在这里，我分享我的 Angular 代码：

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)"
              >
                {{ 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 district of districts">
              <mat-checkbox>
                {{ district.name }}
              </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/{{ 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>
      <mat-card-content>
        <p>PRICE</p>
      </mat-card-content>
    </mat-card>
  </div>
</div>

<app-footer></app-footer>

在这里，我分享了我的输出窗口，正如你们在左侧看到的那样，我创建了 mat-checkbox，我需要做的就是当我选中“RICE”框时，它应该只显示RICE CARD ，当我选中Wheat 时那么只有小麦卡。

Answer 1

首先要知道的是你

一个元素上不能有多个模板绑定

正如您在尝试这样做时所看到的，如果您有兴趣， 这里是官方文件

所以这里有两种可能的解决方案

1. 通过[hidden]指令隐藏未经检查的卡片，如下所示：

   <mat-card [hidden]="!crop.checked">

2. 将您的卡片包裹在另一个元素（如div然后执行以下操作：

    <div *ngFor="let crop of crops"> <mat-card class="crop-card" style="min-width: 17%" *ngIf="crop.checked"> . . </mat-card> </div>