Угловой 2 - данные не привязаны к таблице

Я создаю угловое приложение 2 с использованием проекта Visual Studio 2015 Studio. Я пытаюсь связать данные с жестко заданными значениями, которые определены в risk-list.component.ts. Данные должны быть связаны с risk-list.component.html, которые в конечном итоге должны отображаться в index.html. Не уверен, что мне не хватает.Угловой 2 - данные не привязаны к таблице

риск-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/[email protected]/es6-shim.min.js"></script> 

    <script src="https://npmcdn.com/[email protected]?main=browser"></script> 
    <script src="https://npmcdn.com/[email protected]"></script> 
    <script src="https://npmcdn.com/[email protected]/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>

источник

2016-05-20 Tom

Любые ошибки в консоли? Что именно не работает? Теги '' пустые? Отображаются ли две строки? – rinukkusu

Проблема заключается в том, что на консоли отсутствуют какие-либо ошибки. Td пуст – Tom

Нет данных, отображаемых при рендеринге index.html. – Tom

Наконец, он работал. Путь, заданный в шаблоне URL-адреса risk-list.components, неверен и задан так же, как пример plunker.

источник

2016-05-23 10:37:42 Tom

Угловой 2 - данные не привязаны к таблице

ответ

Смежные вопросы