更新Angular2中的视图

时间:2017-01-29 23:37:14

标签: javascript jquery ajax angular

新角2并面临一个问题。有一个API在我的项目中加载一个js文件。问题是,我必须使用这个js文件而不是我的控制来改变它,基本上,这个js文件有很少的方法通过AJAX调用API并返回一个数组,但它返回它的方式很旧。 我需要的只是在数据进入后立即更新视图,尝试了很多方法,但仍然无法使其工作。任何想法如何绑定和更新视图?



import {Component, AfterContentInit} from "@angular/core";
import {IProduct} from "./product";
import {ProductService} from "./product.service";
declare var ExpressLibraryLoader: any;
@Component({
    selector: 'pm-products',
    moduleId: module.id,
    templateUrl: 'product-list.component.html',
    styleUrls: ['product-list.component.css']
})
export class ProductListComponent implements AfterContentInit{
    pageTitle: string = 'Product List';
    listFilter: string = '';
    products = [];
    errorMessage: string;

    constructor(private _productService: ProductService) {
    }

    ngAfterContentInit(): void{
         //this._productService.getProducts().
           //   subscribe(products => this.products = products, error => this.errorMessage = <any>error);

        ExpressLibraryLoader.initialise({
            platformKey: 'xxx',
            brandID: 20,
            libraryUrl: "http://localhost/xxxxcx/",
            domainLaunchUrl: "http://localhost/xcxcxc/",
            success: function (ExpressLibrary) {
                let parameters =
                    {
                        languageCode: 'en',
                        gameProviderID: [7],
                        success: function (response) {

                            if (response.Status === "Success") {

                                //response.Result.Games.map(response => this.products = response);
                                this.products = response.Result.Games;
                                console.log(this.products)
                            } else {

                            }
                        },
                        error: function () {
                        }
                    };
                ExpressLibrary.games.getDesktop(parameters);
            }
        });
    }

}
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

看起来您需要使用箭头功能,[{ id: 1234, json: 'https://helloworld.com.json', }, { id: 5678, json: 'https://anotherlink.com.json', }] 引用不指向您的类实例:

this

答案 1 :(得分:0)

我发现了问题,似乎是<{p>中的this

success: function (response) {
           if (response.Status === "Success") {
             this.products = response.Result.Games;
             console.log(this.products)
           } } 

有不同的范围。因此,解决方案显而易见且简单易行:

var that = this;

     var parameters =
          {
              //various parameters
              success: function(response){
                 if (response.Status === "Success") {
                    that.products = response.Result.Games;
                 } 
              },
              error: function () {

              }
           };
      ExpressLibrary.games.getDesktop(parameters);