Question

我无法让Aurelia迭代地图，其中键是字符串（UUID）。

以下是我从其他地方运行的API获取的数据示例：

my_data = {
  "5EI22GER7NE2XLDCPXPT5I2ABE": {
    "my_property": "a value"
  },
  "XWBFODLN6FHGXN3TWF22RBDA7A": {
    "my_property": "another value"
  }
}

我试图使用这样的东西：

<template>
<div class="my_class">
    <ul class="list-group">
        <li repeat.for="[key, value] of my_data" class="list-group-item">
                <span>${key} - ${value.my_property}</span>
        </li>
    </ul>
</div>
</template>

但Aurelia告诉我Value for 'my_data' is non-repeatable。

我通过谷歌搜索找到了各种答案，但是没有明确解释或不完整。无论是我在谷歌上搜索错误，还是需要一个好的问答。

Answer 1

最简单的方法是将其转换为数组（在ViewModel代码中）

或者您可以在repeat.for内使用ValueConverter，如本文所述Iterating Objects

代码......

// A ValueConverter for iterating an Object's properties inside of a repeat.for in Aurelia
export class ObjectKeysValueConverter {
    toView(obj) {
        // Create a temporary array to populate with object keys
        let temp = [];

        // A basic for..in loop to get object properties
        // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...in
        for (let prop in obj) {
            if (obj.hasOwnProperty(prop)) {
                temp.push(obj[prop]);
            }
        }

        return temp;
    }
}

/**
 * Usage
 * Shows how to use the custom ValueConverter to iterate an objects properties
 * aka its keys.
 * 
 * <require from="ObjectKeys"></require>
 * <li repeat.for="prop of myVmObject | objectKeys">${prop}</li>
 */

或者，您可以使用Aurelia Core提供的Aurelia Repeat Strategies Team member

您必须将插件导入您的应用。然后你会在 repeat.for 中使用管道语法来使用它......就像这样....

<div repeat.for="[key, value] of data | iterable">
    ${key} ${value.my_property}
</div>

Answer 2

作为ry8806提供的资源的另一个资源，我也使用了值转换器：

export class KeysValueConverter {
  toView(obj) {
    if (obj !== null && typeof obj === 'object') {
      return Reflect.ownKeys(obj).filter(x => x !== '__observers__');
    } else {
      return null;
    }
  }
}

它很容易用来做你正在尝试的事情，如下所示：

<template>
<div class="my_class">
    <ul class="list-group">
        <li repeat.for="key of my_data | keys" class="list-group-item">
                <span>${key} - ${my_data[key]}</span>
        </li>
    </ul>
</div>
</template>

Aurelia遍历地图，其中键是字符串

2 个答案: