Javascript 我想创建一个mat复选框更改事件，它可以显示或隐藏卡

我在这里分享我的角度代码：

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复选框，我需要做的是，当我选中“RICE”框时，它应该只显示米卡，而当我选中麦卡时，则只显示麦卡。首先要知道的是你

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

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

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

通过
[hidden]
指令隐藏未选中的卡，如下所示：

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



用另一个元素（如
div
）包装您的卡，并执行以下操作：

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


.
.


首先要知道的是你

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

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

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

通过
[hidden]
指令隐藏未选中的卡，如下所示：

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



用另一个元素（如
div
）包装您的卡，并执行以下操作：

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


.
.


将
*ngIf=“item.checked”
添加到您的
mat卡中
块它会导致以下错误：模板解析错误：一个元素上不能有多个模板绑定。仅使用一个前缀为*（（“style=”最小宽度：17%“*ngFor=”让作物收割“[ERROR->]*（ngIf）=”item.checked“>添加
*ngIf=”item.checked“
到您的
mat卡
块它给我这个错误：模板解析错误：不能在一个元素上有多个模板绑定。只使用一个前缀为*（（“style=”min width:17%“*ngFor=”let crop of crops“[Error->]*（ngIf）=”的属性。已选中。”">谢谢你的努力，但它仍然不起作用…请帮助我你说的不起作用是什么意思..你尝试了哪种解决方案，发生了什么事？因此，如果答案有帮助，请将其标记为有用谢谢你的努力，但它仍然不起作用…请帮助我你说的不起作用是什么意思..你尝试了哪种解决方案，发生了什么情况penedgreat，因此如果答案有用，请将其标记为有用