Question

我想使用sap.m.TileContainer来显示包含一些信息的图块。 SAP示例并不真正有用，因为它不遵循指南，例如使用manifest.json等...

所以我从头开始在SAP Web IDE中构建了一个应用程序。我正在使用TileContainer来显示瓷砖。其tile聚合绑定到本地JSON数据文件。

数据文件包含一个包含三个项目的数组。但是，渲染后只显示两个。有什么建议吗？

这是我的data.json：

{
    "TileCollection": [{
        "title": "Slovenská Republika",
        "info": "support for SR",
        "flag": "",
        "icon": "sap-icon://inbox"
    }, {
        "title": "Deutschland",
        "info": "support for DE",
        "flag": "",
        "icon": "sap-icon://inbox"
    }, {
        "title": "Ceska Republika",
        "info": "support for CZ",
        "flag": "",
        "icon": "sap-icon://inbox"
    }]
}

这是我的XML视图：

<mvc:View
    controllerName="com.support_page.controller.App"
    height="100%"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core"
    xmlns:tnt="sap.tnt"
    xmlns="sap.m">
    <Page
        showHeader="true"
        enableScrolling="false">
        <TileContainer
            id="container"
            tileDelete="handleTileDelete"
            tiles="{/TileCollection}">
            <StandardTile
                icon="{icon}"
                title="{title}"
                info="{info}"
                activeIcon="{flag}"/>
        </TileContainer>
    </Page>
</mvc:View>

Answer 1

非常感谢你的建议

与此同时，我也用瓷砖容器解决了它。

我所做的是我使用的不是默认模型。我在component.js中初始化了模型然后使用模型＆gt; / TileCollection虽然我仍然有点困惑但它工作。不过，谢谢你的回答。

Answer 2

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCircle as fasCircle } from '@fortawesome/fontawesome-free-solid'
import { faCircle as farCircle } from '@fortawesome/fontawesome-free-regular'

const Circle = ({ filled, onClick }) => {

  return (
    <div onClick={onClick} >
      <FontAwesomeIcon icon={filled ? farCircle : fasCircle}/>
    </div>
  );
};

class App extends React.Component {
  state = { filled: false };

  handleClick = () => {
    this.setState({ filled: !this.state.filled });
  };

  render() {
    return <Circle filled={this.state.filled} onClick={this.handleClick} />;
  }
}

sap.m.TileContainer仅显示2个Tiles

2 个答案: