在 angular 中将值从组件传递到服务

问题描述

我正在构建一个电子商务网站，当用户单击任何我想将产品网格更改为用户单击的复选框时。 我试图将 index 的值从 category-filter.component.ts 传递给 productgrid.service.ts 但每次我得到未定义的结果。

类别过滤器组件：

export class CategoryFilterComponent implements OnInit {

  selectedIndex: any = -1; // -1 because at screen load I do not want any checkboxes to be selected
  categoriesList: any= [];
  constructor(private categoryfilter: CategoryfilterService, private productList: ProductgridService) {
            this.categoryfilter.getCategories();
            this.categoriesList = this.categoryfilter.categoriesNames;
   }
  ngOnInit(): void {
  }

  changeSelection(event, index) {
    this.selectedIndex = event.target.checked ? index : undefined; // to only select one checkbox at a time
    index = this.selectedIndex ;
    this.productList.index = this.selectedIndex;
    console.log(this.productList.index) // works as intended
    // this.productList.saveIndex(this.selectedIndex);

  }
}

类别过滤器HTML：

<div class="filter-item" *ngFor="let category of categoriesList[0]; let index = index">
    <input type="checkbox" [ngModel]="selectedIndex === index" (change)="changeSelection($event, index)">
    <label>{{ category | titlecase }}</label>
</div>

产品网格服务：

export class ProductgridService {

  allProducts: any[] = [];
  index: any;
  constructor(private http: HttpClient) {
   }
   ngOnInit(): void {

  }
 

  getAllProducts() {
     console.log(this.index)
    if(this.index == 0) {
      console.log(this.index)
      this.http.get('https://dummyjson.com/products/category/smartphones').subscribe({
        next: (data) => {
          this.allProducts.push(data);
          console.log(this.allProducts);
        }
      })
    } else if (this.index == 1){
      console.log(this.index)
      this.http.get('https://dummyjson.com/products/category/laptops').subscribe({
        next: (data) => {
          this.allProducts.push(data);
          console.log(this.allProducts)
        }
      })
    }
    else {
      console.log(this.index) // this only works
      this.http.get('https://dummyjson.com/products').subscribe({
        next: (data) => {
          this.allProducts.push(data);
        }
      })
    }
  }
}

产品网格组件：

@Component({
  selector: 'app-products-grid',
  templateUrl: './products-grid.component.html',
  styleUrls: ['./products-grid.component.scss']
})
export class ProductsGridComponent implements OnInit {
  allProductList: any;
  singleCategorylist: any;
  index : number; 
  constructor(private productList: ProductgridService) {
    
    this.productList.getAllProducts();
    this.allProductList = this.productList.allProducts;
    // console.log(this.allProductList);
    // this.index = this.productList.index
    // console.log(this.index)
  }

  ngOnInit(): void {
    
  }

}

产品网格HTML：

<div class="col" *ngFor="let product of allProductList[0]?.products; let i = index">
  <img class="img-product" src="{{ product.thumbnail }}" alt="">
  <div class="dc">
    <p> -{{ product.discountPercentage }}% </p>
  </div>
  <p id="product-title">{{ product.title }}</p>
  <p id="product-description">{{ product.description }}.</p>
  <div class="product-price">
    <p> <span id="price-dc"><span style="font-weight:bold;">{{ product.price }} </span> <span>USD</span> </span> <span
        style="font-weight:bold;">477.85 </span><span>USD</span></p>
  </div>
  <p class="product-details">Brand: <span style="font-weight:bold;">{{ product.brand }}</span></p>
  <p class="product-details">Category: <span style="font-weight:bold;">{{ product.category }}</span></p>
  <p class="product-details">In stock: <span style="font-weight:bold;">{{ product.stock }}</span></p>
  <span class="product-rating"><img class="img-star" [attr.src]="'assets/images/star-17.png'" alt=""> <span
      style="color:#F4B000;"> {{ product.rating }} </span> <span>({{ product.id }})</span> </span>
  <button class="btn">ADD TO CART</button>
</div>

如果我的代码看起来杂乱无章，我很抱歉，因为我还是初学者，没有经验。

在 Angular 中，您不必将注入的服务分配给组件 class。 因此，在 CategoryFilterComponent 的构造函数中删除所有分配。 在您的代码中，您可以直接使用该服务。 这样做之后，它应该可以工作。

另外请从您的服务中删除 ngOnInit 方法。 它仅适用于组件。

我希望这有帮助。