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

看起来我遇到的问题是没有让kendo网格元素的实例没有被注入到下面给出的网格组件中

我在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组件中引用

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

我从昨天的问题中提取了你对plunker的所有信息，然后开始工作了。您需要检查控制台中的第一个错误。

未捕获的ReferenceError：未定义jQuery（匿名函数）@ VM719 kendo.all.min.js：10

添加对jQuery的引用应该修复它。修正：plunker。

如何在angular2组件中获取Kendogrid的实例

1 个答案: