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}我做获取预期的输出。

此外，我希望service of services的第二次重复在表体中生成两行，但它只生成一行。

我已尝试将<div repeat.for="instance of service.instances">替换为<div repeat.for="instance of $parent.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>

Aurelia中的嵌套重复不识别对象数组

1 个答案: