Аурелия.Почему во вложенном файле repeat.for select не отображаются данные?

Question

Ниже приведена простая таблица, отображающая пользователей и их роли.Мой вложенный repeat.for просматривает список ролей.Мой repeat.for = "role of roleData" не отображает мои данные.Можете ли вы сказать мне, почему нет?Это работает, только если я добавлю 3-й repeat.for внутри тега div.

    <tbody>
     <tr repeat.for="user of usersData">
     <td>${user.name}</td>
     <td>
      <select>
       <option repeat.for="role of rolesData">${role.name}</option>
      </select>
     </td>
    </tr>
      <div repeat.for="role of rolesData">
   <tbody>

Answer 1

трудно ответить, не увидев вас js/ts, но я вполне уверен, что вызвало вашу проблему.

Я предполагаю, что у вас есть свойство rolesData в вашей виртуальной машине, которое заполняется вAJAX звонок.это означает, что при первой загрузке страницы rolesData все еще не определено.и затем, в then вызова ajax, вы, вероятно, делаете this.rolesData = data или что-то подобное.обратите внимание, что даже если вы объявите свойство с именем rolesData в своем классе, оно не будет иметь никакого эффекта, пока вы на самом деле не назначите ему что-то (даже присвоение undefined хорошо).

в aurelia - когда выпривязать к несуществующей собственности, aurelia создаст ее для вас и привязать к ней.поэтому у вас никогда не бывает исключений или чего-то подобного.

в вашем случае вы привязываете к несуществующему свойству внутри цикла repeat.в повторе, каждое повторение создает локальную область действия для текущей переменной, привязка к несуществующему свойству внутри дочерней области создает новое свойство в дочерней области.поэтому даже в более позднее время - вы на самом деле заполняете rolesData материалом, он заполняется в родительской области, - но каждый дочерний элемент ограничен отдельной коллекцией (каждый дочерний элемент имеет свою собственную область).

когда у вас есть внешний div, связанный с той же переменной, у вас есть небольшой побочный эффект, который заставляет все это работать.поскольку внешний div создает переменную в родительской области, и теперь каждый дочерний элемент - вместо создания локальной переменной в своих соответствующих областях - они будут использовать ту же переменную, которая уже существует в родительской области.и затем - позже, когда вы заполняете ту же самую переменную - привязка запускается, и все выглядит хорошо.

TL; DR: в вашей виртуальной машине объявите rolesData = undefined;вместо того, чтобы просто объявить это.