javascript - 剑道网格不显示在弹出窗口中

Question

• 我是 Angular 2 和 kendo UI 的新手。
• 我正在尝试在我的弹出窗口中添加网格。
• 我能够显示弹出窗口。
• 但是当我添加网格时它没有显示。
• 你们能告诉我如何解决吗？
• 在控制台中，我也没有看到任何错误。
• 我正在尝试使用 kendo ui 显示弹出窗口。 http://demos.telerik.com/kendo-ui/grid/index

• 示例工作代码 http://jsfiddle.net/XY7HT/53/

• 在下方提供相关代码并在 fiddle 中提供完整代码，因为此处没有空间粘贴 https://jsfiddle.net/9bwdk6xk/4/

    <div class="waterPaperDocInfo">                 
            <span class="fa fa-file-text-o"></span>
            <span class="cat" (click)="cloud();">&nbsp;{{hat.paper}} paper</span> | Last Modified: {{hat.finger}} &nbsp;&nbsp;<span class="fa fa-clock-o">9:00 am</span>
    </div>

    <div id="win1" style="display:none">
        <p>First Window</p>
        <button type="button" id="open2">Open second Window</button>
            <input type="file" name="batchFile" id="batchFile" title="Select file" />
        <div id="grid"></div>

    </div>


$("#grid").kendoGrid({
        selectable: "multiple cell",
        allowCopy: true,
        columns: [
            { field: "productName" },
            { field: "category" }
        ],
        dataSource: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" }
        ]
    });

}

Answer 1

1. 如果您使用带有 angular2 的 kendo ui。检查 kendo ui for angular 2 web 以获取组件指南 here
2. 至于 Angular 2，你想如何添加组件基本步骤(检查 system.cofig.js 上的依赖项，如果不可用，请先使用 npm 下载它 -> 在 app/ng.module.ts 中添加模块 -> 在应用程序上使用它.component.ts)

3. 这就是您在 mvvm 中的方式(angular2)检查 this ，你使用的是 jquery-ish 方式。我不确定他们(剑道)是否希望您那样使用它，因为我在文档中没有看到他们那样使用它。

4. 虽然只是我的意见，但不要发布所有代码(让人们阅读这么多，至少我懒得阅读所有这些)

基本上在 ng.module.ts 上检查这一行我正在导入网格、按钮和对话框，将其添加到 @NgModule

import { GridModule } from '@progress/kendo-angular-grid';
import { DialogModule } from '@progress/kendo-angular-dialog'
import { ButtonsModule } from '@progress/kendo-angular-buttons';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, GridModule, DialogModule, ButtonsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

然后你就可以像这样使用它了:

<kendo-dialog title="Kendo Dialog">
     <kendo-grid [data]="gridData">
         //your code goes here
     </kendo-grid>
</kendo-dialog>