如何在angular2組件中獲取Kendogrid的實例

Question

如何獲取Kendogrid的實例

我試圖創建一個示例應用程序來加載包裹在angular2組件中的kendogrid。 當我嘗試運行應用程序時，我在chrome瀏覽器中遇到了異常，如下所示。

zone.js@0.6.12?main=browser:323 Error: SyntaxError: Unexpected identifier
    at Object.eval (http://localhost:57768/appScripts/boot.js:3:17)
    at eval (http://localhost:57768/appScripts/boot.js:17:4)
    at eval (http://localhost:57768/appScripts/boot.js:18:3)
Evaluating http://localhost:57768/angular2/platform/browser
Evaluating http://localhost:57768/appScripts/boot.js
Error loading http://localhost:57768/appScripts/boot.js

看起來我面臨着無法獲得劍道網格元素實例未注入以下網格組件的問題

我在Index.html中擁有以下代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Angular 2 with ASP.NET 5</title>
    <link href="libs/css/bootstrap.css" rel="stylesheet" />

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="https://npmcdn.com/es6-shim@0.35.0/es6-shim.min.js"></script>
    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

    <script src="http://cdn.kendostatic.com/2015.3.1111/js/jszip.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.3.1111/js/kendo.all.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.3.1111/js/kendo.aspnetmvc.min.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: {
                appScripts: {
                    defaultExtension: 'js'
                }
            }
        });
    </script>
    <script>

        System.import('appScripts/boot')
              .then(null, console.error.bind(console));
    </script>

</head>
<body>
    <h2>Demo of Angular 2 using ASP.NET 5 with Visual Studio 2015</h2>
    <!--<my-app>Loading...</my-app>-->
    <kendo-grid>Loading Kendo</kendo-grid>
</body>
</html>

我的boot.ts中的代碼

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import { HTTP_PROVIDERS, Http, Headers, Response, JSONP_PROVIDERS, Jsonp } from 'angular2/http';
import {Kendogrid} from './Kendogrid';

bootstrap(Kendogrid, [HTTP_PROVIDERS])
    .catch(err => console.error(err));

我在Kendogrid組件中引用的Grid的以下代碼

import { Component, Input, Host, ElementRef, AfterViewInit, ViewChild } from 'angular2/core';

declare var $: any;

@Component({
    selector: 'k-grid',
    template: '<div></div>'
})
export class Grid implements AfterViewInit {

    constructor( @Host() private elm: ElementRef) {
        console.log("in constructor of Grid");
    }

    @Input() options: any;

    ngAfterViewInit() {
        console.log("in ngAfterViewInit of Grid");
        $(this.elm.nativeElement).children().first().kendoGrid(this.options);
    }
}

以下代碼我必須創建kendo-angular2組件

import {Component } from 'angular2/core';
import { Grid } from './grid';
import { Location } from 'angular2/router';

declare var kendo: any;

@Component({
    selector: 'kendo-grid',
    templateUrl: 'kendogrid.html',
    directives: [Grid]
})
export class Kendogrid {

    info = "Willkommen";
    options: any;

    constructor() {
        console.log("in constructor of Kendogrid");
        this.setUpGridOptions();
    }

    private setUpGridOptions() {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: "http://restcountries.eu/rest/v1/region/oceania"
            },
            error: function (e) {
                // handle data operation error
                alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            },
            pageSize: 5,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            batch: false,
            schema: {
                model: {
                    name: "name",
                    fields: {
                        name: { editable: false, nullable: true },
                        capital: {},
                        region: {},
                        subregion: {}
                    }
                }
            }

        });

        this.options = {
            dataSource: dataSource,
            columns: [
                { field: "name", title: "name", width: "40px" },
                { field: "capital", title: "capital", width: "200px" },
                { field: "region", title: "region", width: "120px" },
                { field: "subregion", title: "subregion", width: "120px" },
            ],
            pageable: true,
            groupable: true,
            sortable: true,
            selectable: true
        }
    }

}

Answer 1

我從昨天的問題中抽出了您對矮人車的一切，並付諸實踐。 您需要檢查控制台中的第一個錯誤。

未捕獲的ReferenceError：未定義jQuery（匿名函數）@ VM719 kendo.all.min.js：10

添加對jQuery的引用應該可以修復它。 固定：塞子。

如何在angular2組件中獲取Kendogrid的實例

問題描述

1 個解決方案

解決方案1
2 已采納 2016-06-24 01:29:04

如何在angular2組件中獲取Kendogrid的實例

問題描述

1 個解決方案

解決方案1 2 已采納 2016-06-24 01:29:04

解決方案1
2 已采納 2016-06-24 01:29:04