Question

我正在使用Typescript visual studio 2015项目创建一个角度2的应用程序。我正在尝试使用risk-list.component.ts中定义的硬编码值绑定数据。数据需要绑定到risk-list.component.html，最终应该在index.html中显示。不确定我错过了什么。

risk-list.component.ts

import { Component } from '@angular/core'

    @Component({
            selector: 'rm-risks',
            templateUrl: 'app/risks/risk-list.component.html'
        })

    export class RiskListComponent {
        pageTitle: string = 'Risk List';
        risks: any[] = [
            {
                "riskId": 1,
                "reference": "HISXX336",
                "insuredName": "sdsdsdsdsd",
                "inceptionDate": "March 19, 2016",
                "riskType": "Test1",
                "status": "Indication",
                "grossPremium": "100",
                "allocatedTo": "XYZ User",
                "allocatedCompany": "XYZ"
            },
            {
                "riskId": 2,
                "reference": "HIXXXXX0",
                "insuredName": "fgfgfgfgfg",
                "inceptionDate": "April 25, 2016",
                "riskType": "Test2",
                "status": "Indication",
                "grossPremium": "312.22",
                "allocatedTo": "PQR User",
                "allocatedCompany": "PQR"
            }


        ];

风险list.component.html

<div class='panel panel-primary'>
    <div class='panel-heading'>
        {{pageTitle}}
    </div>
    <div class='panel-body'>
        <div class='row'>
            <div class='col-md-2'>Filter by:</div>
            <div class='col-md-4'>
                <input type='text' />
            </div>
        </div>
        <div class='row'>
            <div class='col-md-6'>
                <h3>Filtered by: </h3>
            </div>

        </div>

        <div class='table-responsive'>
            <table class='table' *ngIf='risks && risks.length'>
                <thead>
                    <tr>
                        <th>Reference</th>
                        <th>Insured Name</th>
                        <th>Inception Date</th>
                        <th>Risk Type</th>
                        <th>Status</th>
                        <th>Gross Premium</th>
                        <th>Allocated To</th>
                        <th>Allocated Company</th>
                    </tr>
                </thead>
                <tbody>

                    <tr *ngFor='let risk of risks'>
                        <td>{{risk.reference}}</td>
                        <td>{{risk.insuredName}}</td>
                        <td>{{risk.inceptionDate}}</td>
                        <td>{{risk.riskType}}</td>
                        <td>{{risk.status}}</td>
                        <td>{{risk.grossPremium}}</td>
                        <td>{{risk.allocatedTo}}</td>
                        <td>{{risk.allocatedCompany}}</td>
                    </tr>

                </tbody>
            </table>

        </div>
    </div>
</div>

app.component.ts

  import { Component } from '@angular/core';
    import { RiskListComponent } from './risks/risk-list.component';


    @Component({
        selector: 'pm-app',
        template: `
        <div>
            <h1>{{pageTitle}}</h1>
              <rm-risks> </rm-risks> 
         </div>
         `,
        directives : [RiskListComponent]
    })

    export class AppComponent {
        pageTitle: string = 'Risk Trader'; 
    }

的index.html

<!DOCTYPE html>
<html>

<head>
    <title>Angular 2 Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="app/app.component.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


    <!-- 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>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>

<body>
   <pm-app>Loading..</pm-app>
</body>

</html>

Answer 1

最后，它奏效了。在risk-list.components的模板URL中设置的路径不正确，并且设置方法与plunker示例相同。

Angular 2 - 未绑定到表的数据

1 个答案: