Question

我将这个json数据作为响应，我试图在“组件模板属性”中迭代这些数据，以显示“li”标签中的内容html

tableName = 'someTable'
engine = sqlalchemy.create_engine('connectionString')
Session = scoped_session(sessionmaker(bind=engine))
currentSession = Session()
query = 'IF ('
                       'EXISTS ('
                       'SELECT * FROM INFORMATION_SCHEMA.TABLES '
                       'WHERE TABLE_SCHEMA = \'dbo\' '
                       'AND TABLE_NAME = \'%s\')) '
                       'BEGIN '
                       'DELETE FROM [database].[dbo].[%s] '
                       'END' % (tableName,tableName)
session.execute(query)
print(query)

我的js代码如下所示

{
  "items": [
    {
      "aliases": [
        "http://www.xyz.co",
        "http://facebook.xyz.co"
      ],
      "styling": {
        "tag_background_color": "#E0EAF1",
        "tag_foreground_color": "#3E6D8E",
        "link_color": "#0077CC"
      },
      "related_sites": [
        {
          "relation": "meta",
          "api_site_parameter": "meta.xyz",
          "site_url": "http://meta.xyz.co",
          "name": "Meta Stack Overflow"
        },
        {
          "relation": "chat",
          "site_url": "http://chat.xyz.co",
          "name": "Stack Overflow Chat"
        }
      ],
      "markdown_extensions": [
        "Prettify"
      ],
      "launch_date": 1221436800,
      "closed_beta_date": 1217462400,
      "site_state": "normal",
      "high_resolution_icon_url": "https://cdn.sstatic.net/Sites/sxyz/img/apple-touch-icon@2.png",
      "favicon_url": "https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico",
      "icon_url": "https://cdn.sstatic.net/Sites/xyz/img/apple-touch-icon.png",
      "audience": "professional and enthusiast programmers",
      "site_url": "http://xyz.co",
      "api_site_parameter": "xyz",
      "logo_url": "https://cdn.sstatic.net/Sites/stackoverflow/img/logo.png",
      "name": "Stack Overflow",
      "site_type": "main_site"
    },
    {
      "aliases": [
        "http://www.xyz.co",
        "http://facebook.xyzw.co"
      ],
      "styling": {
        "tag_background_color": "#E0EAF1",
        "tag_foreground_color": "#3E6D8E",
        "link_color": "#0077CC"
      },
      "related_sites": [
        {
          "relation": "meta",
          "api_site_parameter": "meta.xyz",
          "site_url": "http://meta.xyz.co",
          "name": "Meta Stack Overflow"
        },
        {
          "relation": "chat",
          "site_url": "http://chat.xyz",
          "name": "Stack Overflow Chat"
        }
      ],
      "markdown_extensions": [
        "Prettify"
      ],
      "launch_date": 1221436800,
      "closed_beta_date": 1217462400,
      "site_state": "normal",
      "high_resolution_icon_url": "https://cdn.sstatic.net/Sites/xyz/img/apple-touch-icon@2.png",
      "favicon_url": "https://cdn.sstatic.net/Sites/sxyz/img/favicon.ico",
      "icon_url": "https://cdn.sstatic.net/Sites/xyz/img/apple-touch-icon.png",
      "audience": "professional and enthusiast programmers",
      "site_url": "http://stackoverflow.co",
      "api_site_parameter": "stackoverflow",
      "logo_url": "https://cdn.sstatic.net/Sites/xyzw/img/logo.png",
      "name": "Stack Overflow",
      "site_type": "main_site"
    }
  ]
}

我试过但我可以实现我想要的，请帮助我，谢谢

Answer 1

试试这个

  <li *ngFor="let data of httpData.items>{{data.related_sites[0].name}}  //trying to iterate the response data.
  </li>

Answer 2

请尝试以下代码

<ul class="menu">
  <li *ngFor="let item of httpData.items>
    <ul>
      <li *ngFor="let alias of item.aliases>
        {{alias}}</br>
      </li>
    </ul> 
    ..
    <ul>
      <li *ngFor="let related_site of item.related_sites>
        {{relation}}
        {{api_site_parameter}}
        {{site_url}}
        {{name}}
      </li>
    </ul>
     ..
     ..
  </li>
</ul>

Answer 3

我看到的第一个问题是，在getStack()函数中，您订阅了http响应观察者，通过调用string将响应转换为JSON.stringify(data)。您实际上需要一个对象而不是它的JSON字符串表示，因此您可以在模板中引用其属性。

您没有发布HTTPTestService类的代码，因此我们不知道您是否对响应进行了任何类型的后处理（可能是.map(...)调用），然后再将其传递给订户。如果将原始Observable<Response>返回给订阅者，则您需要将响应正文解析为有效对象。您可以通过替换以下行

来完成此操作

data =>this.httpData = JSON.stringify(data)

与

data => this.httpData = data.json()

请注意，最好将此转换放在您的服务文件中，该文件应该已经将有效对象返回到您的组件。还要确保将解析调用放在try-catch块中，以防服务器返回无效的JSON响应。

修复了http响应的解析后，您应该能够按照此other response

中的Amol Bhor概述的数据进行迭代

如何在Angular 2打字稿中迭代Json响应数据

3 个答案: