Question

product.ts

import {Component, Injectable, OnInit, Output, EventEmitter} from '@angular/core';
import {ProductfilterComponent} from '../productfilter.component';
import {ProductFilterService} from "../../../services/product_filter.service";
import {timer} from "rxjs/observable/timer";
import {Observable} from "rxjs/Observable";

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

@Injectable()
export class NormalproductfilterComponent implements OnInit {
  products: any;
  data: any;
  run: boolean = true;
  normal_products_image: any[] = ["prdct1", "prdct2", "prdct3", "prdct4", "prdct5", "prdct6", "prdct7", "prdct8", "prdct1", "prdct2", "prdct3", "prdct4",];

  constructor(private _normalProducts: ProductFilterService) {
  }

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

  getAllFilterProducts(selected_brands) {
    this._normalProducts
      .getFilterProducts(selected_brands)
      .subscribe(products => {
        this.products = products.Data;
      });
  }

  retrieveProducts(){
    return this.products;
  }


  ngOnInit() {
    this.getAllProducts();
    let timer = Observable.timer(2000, 5000);
    timer.subscribe(() => this.retrieveProducts());
  }
}

service.ts

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {ConfigService} from './config.service';
import 'rxjs/add/operator/map';
import {it} from 'selenium-webdriver/testing';
import {ProductService} from "./products.service";

@Injectable()
export class ProductFilterService {
  iternaries = [];

  constructor(private _http: Http, private _basUrl: ConfigService, private _products: ProductService) {
  }

  checkMe: any;



  getAllProducts() {
    return this._http.get(this._basUrl.baseUrl() + '/products/', {params: {action: 'angular4'}})
      .map(res => {
        //console.log(res.json());
        return res.json();
      });
  }

  getFilterProducts(category_id) {
    return this._http.get(this._basUrl.baseUrl() + '/products/categories/'+category_id, {params: {action: 'angular4'}})
      .map(res => {
        //console.log(res.json());
        return res.json();
      });
  }
}

html Page

<div id="normal_product_filter" class="d-flex flex-wrap w-100">
    <div *ngFor = "let singleRecord of products; let i = index"  class="col-6 col-lg-3" style="padding-right: 0;">
      <div class="product_group">
            <div class="card custom_card mb-1" style="position: relative;" lazy-load-images data-mh="custom_card">

                <figure class="snip1496 m-0">
                  <img class="d-block mx-auto" src="{{singleRecord.images[0].src}}" attr.data-src="{{singleRecord.images[0].src}}" alt="{{singleRecord.images[0].src}}" />
                  <!-- <img data-src="assets/images/productssingleRecordsages }}.png" altsingleRecordsages}}" /> -->
                  <div class="icons">
                    <a><i class="fa fa-shopping-cart" aria-hidden="true"></i></a>
                    <a><i class="fa fa-heart" aria-hidden="true"></i></a>
                    <a><i class="fa fa-eye" aria-hidden="true"></i></a>
                    <!-- <a><i class="fa fa-search" aria-hidden="true"></i></a> -->
                  </div>
                </figure>

                <!-- <div class="dummy_div">&nbsp;</div> -->
            </div>

            <!-- product info -->
            <div class="col-12 p-0 mb-3 text-center">
                <p class="text-uppercase mb-0">{{singleRecord.name}}</p>
                <p class="mb-0 price">Rs. {{singleRecord.price}}
                    <span class="deleted_price"><del>Rs.{{ singleRecord.regular_price }}</del></span>
                </p>
            </div>
            <!-- /product info -->
      </div>
    </div>
</div>

当用户选择任何产品时，我从getAllFilterProducts()功能获得了记录。之后我的产品页面视图没有更新。那么如何在更改products变量后更新我的视图。在我的视图文件中，我在第一次运行时显示我的所有产品，但在用户点击过滤器复选框后，我的getAllFilterProducts()函数调用。但是查看不会更改值在页面上显示相同的结果。

Answer 1

我尝试了这种情况，我得到了预期的结果。

检查此组件的Html模板
检查从服务调用获取的json格式是正确的。

我还看到了组件类的@Injectable（）装饰器，这是不需要的。（即使我们给这个装饰器也能工作）。

Angular 4视图没有更新？

1 个答案: