Question

我在尝试循环并使用ngFor显示数据时遇到错误。

控制台中的实际错误“错误：无法找到'object'类型的不同支持对象'[object Object]'。NgFor仅支持绑定到诸如Arrays之类的Iterables。”

这是我的代码：

// TS Component

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="keyboardrecorder.Controller">
   <children>
      <TabPane prefHeight="400.0" prefWidth="600.0" tabClosingPolicy="UNAVAILABLE">
        <tabs>
          <Tab text="Key Typed">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                     <children>
                        <TextArea fx:id="consoleKeyTyped" editable="false" onKeyTyped="#outputKeyTyped" prefHeight="368.0" prefWidth="600.0" wrapText="true" />
                     </children>
                  </AnchorPane>
            </content>
          </Tab>
          <Tab text="Key Pressed">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                     <children>
                        <TextArea fx:id="consoleKeyPressed" editable="false" onKeyPressed="#outputKeyPressed" prefHeight="368.0" prefWidth="600.0" wrapText="true" />
                     </children>
                  </AnchorPane>
            </content>
          </Tab>
            <Tab text="Key Released">
              <content>
                <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                     <children>
                        <TextArea fx:id="consoleKeyReleased" editable="false" onKeyReleased="#outputKeyReleased" prefHeight="368.0" prefWidth="600.0" wrapText="true" />
                     </children>
                  </AnchorPane>
              </content>
            </Tab>
        </tabs>
      </TabPane>
   </children>
</AnchorPane>

// localstorage array

var lssessionsObject = JSON.parse(localStorage.getItem('sessionsObject'));

HTML

lssessionObject = {"total_rows":1,"offset":0,"rows":[{"id":"245fd1cbf38f79256a7443a0b5001461","key":"245fd1cbf38f79256a7443a0b5001461","value":{"cinemaid":"0001","session":"168970","filmid":"HO00003858","screen":"VIP 1","datetime":"2017-07-22T11:00:00","attributes":["3D Film","Scene VIP"]}}]}

请帮助我

Answer 1

ngFor适用于iterables。可迭代对象是实现返回迭代器的[Symbol.iterator]方法的对象。您可以阅读更多相关信息here。默认情况下，只有Array和Map可以在JS中迭代。

JavaScript中的对象不可迭代。而您的sessionsObject是简单对象，因此不会实现[Symbol.iterator]方法。但您可以自己轻松实现它：

// 
lssessionsObject[Symbol.iterator] = function* () {
   for (p in this) yield this[p];
}

Angular NgFor仅支持绑定到诸如Arrays之类的Iterables

1 个答案: