Angular API和数据显示

发布于 2025-02-10 23:57:35 字数 632 浏览 1 评论 0原文

我正在尝试在Angular组件的HTML部分访问我以粗体标记的字段。我从API调用中获取它们，但我无法导航到它们。

我只能到达product.sgation。我在html中得到一个对象/objetc ....

我刚刚开始使用API的API开始冒险。

我需要显示粗体**数据。

{
  "id": 1,
  "name": "test api",
  "categories": [
    {
      "id": 12,
      "name": "test-sub-api",
      "products": [
        {
          "id": "33",
          "**thumbnail**": "https:urlimagetest",
          "**display_name**": "ABCD",
          "instructions": {
            "**price**": "pricetest",
            "**format**": "formattest"
          }
        }
      ]
    }
  ]
}

我如何束缚它？我尝试使用{{myval.name}}，但我不知道如何显示粗体数据

原文

I am trying to access in the html part of my angular component to the fields that I mark in bold.
I get them from an api call, but I am not able to navigate to them.

I only get to product.categories and I get an object/objetc in my html....

i am just starting my adventure with api in angular.

i need to show the bold ** data.

{
  "id": 1,
  "name": "test api",
  "categories": [
    {
      "id": 12,
      "name": "test-sub-api",
      "products": [
        {
          "id": "33",
          "**thumbnail**": "https:urlimagetest",
          "**display_name**": "ABCD",
          "instructions": {
            "**price**": "pricetest",
            "**format**": "formattest"
          }
        }
      ]
    }
  ]
}

how i can bind that?? i try with {{myVal.name}}, that works, but i don't know how show the bold data

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

说谎友 2025-02-17 23:57:35

您需要使用*ngfor

<div *ngFor="let category of data.categories">
  <h3>{{ category.name }}</h3>
  <table>
    <tr>
      <th>Thumbnail</th>
      <th>Name</th>
      <th>Price</th>
      <th>Format</th>
    </tr>
    <tr *ngFor="let product of category.products">
      <td>{{ product.thumbnail }}</td>
      <td>{{ product.display_name }}</td>
      <td>{{ product.instructions.price }}</td>
      <td>{{ product.instructions.format }}</td>
    </tr>
  </table>
</div>

提示：如果要在HTML模板中打印对象进行调试，请使用JSON管道：

<pre>{{data | json}}</pre>

如果没有管道，您将获得[对象对象]

You need to loop through the arrays with *ngFor

<div *ngFor="let category of data.categories">
  <h3>{{ category.name }}</h3>
  <table>
    <tr>
      <th>Thumbnail</th>
      <th>Name</th>
      <th>Price</th>
      <th>Format</th>
    </tr>
    <tr *ngFor="let product of category.products">
      <td>{{ product.thumbnail }}</td>
      <td>{{ product.display_name }}</td>
      <td>{{ product.instructions.price }}</td>
      <td>{{ product.instructions.format }}</td>
    </tr>
  </table>
</div>

Tip: If you want to print an object in the html template for debugging, use the json pipe: