Question

productFilterComponent.ts

import {Component, OnInit} from '@angular/core';
import {ProductFilterService} from '../../services/product_filter.service';
import {ProductService} from "../../services/products.service";
import {NormalproductfilterComponent} from "./normalproductfilter/normalproductfilter.component";
import * as _ from "lodash";

@Component({
  selector: 'app-productfilter',
  templateUrl: './productfilter.component.html',
  styleUrls: ['./productfilter.component.css'],
  directives: [NormalproductfilterComponent]
})
export class ProductfilterComponent implements OnInit {

  brands: any;
  products: any;
  filter_products: any;

  filtered_result = [];
  selected_brands = [];
  Data: any = [];

  color: any[] = ["red", "blue", "green", "orange", "grey", "yellow", "gold"];

  constructor(private _products: ProductService, private _productBrands: ProductFilterService, private normalProduct: NormalproductfilterComponent) {
  }

  getAllBrands() {
    this._productBrands
      .getAllBrands()
      .subscribe(brands => {
        this.brands = brands.Data;

        this.brands.forEach(singleRecord => {
          if (singleRecord.parent == 0) {
            this.Data[singleRecord.name] = singleRecord.id;
          }
        })
      })
  }

  getAllProducts() {
    this._products
      .getAllProducts()
      .subscribe(products => {
        this.products = products.Data;
        console.log(this.products);
      });
  }


  // Getting Selected Games and Count
  getSelected(val, event) {
    var index = this.selected_brands.indexOf(val);
    if (index === -1) {
      this.selected_brands.push(val);
    } else {
      this.selected_brands.splice(index, 1);
    }
    console.log(this.selected_brands);
    for (let temp of this.products) {
      if (this.selected_brands != '' || temp != 'undefined') {
        for (let temp2 of this.selected_brands) {
          this.filter_products = _.filter(temp.categories, {'id': temp2});
          if (this.filter_products != '') {

            var indexofFilterProducts = this.filtered_result.indexOf(temp);
            if (indexofFilterProducts === -1) {
              this.filtered_result.push(temp);
            } else {
              this.filtered_result.splice(indexofFilterProducts, 1);
            }
          }
        }
      }
      else {
        this.filtered_result = this.products;
      }
    }

    this.normalProduct.products = this.filtered_result;
  }


  ngOnInit() {
    this.getAllBrands();
    this.getAllProducts();
    }
  }

这是我的产品过滤器文件，我想更新另一个文件上的产品价值 normalProductFilter.ts

import {Component, Injectable, OnInit, Output, EventEmitter} from '@angular/core';
import {ProductfilterComponent} from '../productfilter.component';
import {ProductService} from "../../../services/products.service";

@Component({
  selector: 'app-normalproductfilter',
  templateUrl: './normalproductfilter.component.html',
  styleUrls: ['./normalproductfilter.component.css']
})

@Injectable()
export class NormalproductfilterComponent implements OnInit {
  @Output() data: EventEmitter<any> = new EventEmitter();
  products: any;
  data:any;
  normal_products_image: any[] = ["prdct1", "prdct2", "prdct3", "prdct4", "prdct5", "prdct6", "prdct7", "prdct8", "prdct1", "prdct2", "prdct3", "prdct4",];

  constructor(private _normalProducts: ProductService) {
  }

  getAllProducts() {
    this._normalProducts
      .getAllProducts()
      .subscribe(products => {
        this.products = products.Data;
        console.log(this.products);
      });
  }
  ngOnInit() {
    this.getAllProducts();
  }
}

我想根据用户选择使用过滤器更改产品的价值我从函数中获取值但是当我尝试通过productFilter更新它时，它就无法正常工作。

Answer 1

创建新服务（在您的终端中输入ng g service <yourServiceName>）。在服务中：

products:any;
holdProducts(pProducts: any){
 this.products=pProducts;
}
retrieveProducts(){
 return this.products;
}

现在从要存储值的组件调用holdProducts（），并将products作为参数传递。在要检索的组件中，调用retrieveProducts（）函数并将其存储在变量中。

您可以在第二个组件中检索已填充的值（或者可能将该逻辑合并到retrieveProducts（））之前设置一个标志或以某种方式检查

来自另一个组件的Angular 4调用变量不更新值？

1 个答案: