Question

我试图弄清楚如何通过复选框对基于物料的给定产品进行过滤？我应该使用管道吗？我应该只使用过滤器吗？

产品列表。HTML

<div class="category-container">
<div class="wrapper">
    <h2>Cotton</h2>
    <div class="form-check">
      <input type="checkbox">
      <label for="defaultCheck1" class="form-check-label">
        Cotton
      </label>
    </div>
  </div>
</div>

<div class="container">
  <div class="row align-items-start">
    <div *ngFor="let product of products"  class="col-6">
      <app-product-card [product]="product" ></app-product-card>
    </div>
  </div>
</div>

Product-list.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ProductService } from 'src/app/_services/product.service';
import { Product } from 'src/app/_models/product';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  @Input() product: Product;
  products: Product[];

  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.loadProducts();
  }

  loadProducts() {
    this.productService.getProducts().subscribe((products: Product[]) => {
      this.products = products;
    }, error => {
      console.log(error);
    });
  }
}

Answer 1

使用过滤器根据复选框事件进行过滤。

private bool _shouldSwitch;
void Start() {
    _shouldSwitch = false;
    DontDestroyOnLoad(this.gameObject);
}

void Update() {
    if (_shouldSwitch) {
        _shouldSwitch = false;
        Debug.Log("before load scene");
        SceneManager.LoadScene("Game");
        Debug.Log("after load scene");
    }
}

public void Switch() {
    _shouldSwitch = true;
}

使用Angular和复选框过滤数据

1 个答案: