嵌套重複無法識別對象數組

Question

使用Aurelia路上，我有以下型號：

export class Services { 
    heading = 'Services'; 
    services = [ 
     { 'name': 'Test Service', 'instances': [{'uri': 'test_uri'}]}, 
     { 'name': 'Another Service', 'instances': [{'uri': 'other_uri'}, {uri: 'backup_uri'}]} 
    ]; 
} 

及以下觀點：

<template> 

    <require from="bootstrap/css/bootstrap.css"></require> 

    <div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <h2>${heading}</h2> 
     </div> 
    </div> 

    <div class="row" repeat.for="service of services"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">${service.name}</div> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th>URI</th> 
         <th>Status</th> 
        </tr> 
       </thead> 
       <tbody> 
        <div repeat.for="instance of service.instances"> 
         <tr> 
          <td>${instance.uri}</td> 
          <td>Running</td> 
         </tr> 
        </div> 
       </tbody> 
      </table> 
     </div> 
    </div> 
    </div> 

</template> 

外repeat.for似乎正常工作和${service.name}是替換爲模型中的.name屬性。但是，${instance.uri}不提供任何輸出。如果我將${instance.uri}替換爲${service.instances[0].uri} I 確實獲得預期的輸出。

另外，我期望第二次重複service of services在表體中生成兩行，但它只生成一行。

我試過用<div repeat.for="instance of $parent.instances">代替<div repeat.for="instance of service.instances">，結果相同。

我需要更改以確保內部重複正常工作？

Answer 1

瀏覽器不允許表格中的div。

改變這一點：

<tbody> 
    <div repeat.for="instance of service.instances"> 
    <tr> 
     <td>${instance.uri}</td> 
     <td>Running</td> 
    </tr> 
    </div> 
</tbody> 

這樣：

<tbody> 
    <tr repeat.for="instance of service.instances"> 
    <td>${instance.uri}</td> 
    <td>Running</td> 
    </tr> 
</tbody>