时间戳

首页 > 解决方案 > 用 JSON 数据填充表

json - 用 JSON 数据填充表

问题描述

我在 Angular 中迈出了第一步，正准备尝试用存储在 JSON 文件中的数据填充一个表。那里面临一些奇怪/意外的情况，因为桌子看起来并不完全符合我的预期。第一件事。

表代码：

  <table class="table  table-sm table-bordered">
    <thead>
    <tr>
      <th>Transfers</th>
      <th>Tools</th>
    </tr>

    </thead>
    <tbody>
    <tr *ngFor = "let data of linksArray">
        <td>{{ data.Transfers}}</td>
        <td>{{ data.Tools}}</td>
       
    </tr>
    </tbody>
  </table>

我想要实现的是，Transfers 和 Tools 列填充了在我的 JSON 文件中使用相应关键字的数据。就在这里

[{"Type":"Transfers","Name":"1","Hyperlink":"#"}, {"Type":"Transfers","Name":"2","Hyperlink":"#"}, 
 {"Type":"Tools","Name":"1","Hyperlink":"#"}, {"Type":"Tools","Name":"2","Hyperlink":"#"}]

通过在我的 .ts 文件中使用它来加载数组

 this.http.get('../../assets/templatefiles/links.json').subscribe(data => {this.linksArray = data as 
any [];
  console.log(this.linksArray);
},
  (err: HttpErrorResponse) => {
    console.log (err.message);
  
}
);

到目前为止一切看起来都很好，我看到控制台中弹出了数组，但是看看表格，我很困惑

在此处输入图像描述

我本来希望第二列中的条目从第一个单元格开始。相反，他们从 3 号开始？我在这里想念什么？现在已经惊叹了很长一段时间:)

标签： jsonangular

解决方案

https://stackblitz.com/edit/angular-ivy-hvcyfq

得到这个

Transfers   Tools
1   10
2   20

你想要这样的代码

<hello name="{{ name }}"></hello>
  <table class="table  table-sm table-bordered">
    <thead>
    <tr>
      <th>Transfers</th>
      <th>Tools</th>
    </tr>

    </thead>
    <tbody>
    <tr *ngFor="let data of linksArray">
        <td>{{data.Transfers.Name}}</td>
        <td>{{data.Tools.Name}}</td>       
    </tr>
    </tbody>
  </table>

而且，这是主要的一点，json大致是这样的

 linksArray = [
   {
      Transfers: {
         Name:"1",
         Hyperlink:"#"
      },
      Tools: {
         Name:"10",
         Hyperlink:"#"
      }
   },
   {
      Transfers: {
         Name:"2",
         Hyperlink:"#"
      },
      Tools: {
         Name:"20",
         Hyperlink:"#"
      }
   },

您现有的 json 看起来像这样，其中 '{' 代表一行

[
   {
      "Type":"Transfers",
      "Name":"1",
      "Hyperlink":"#"
   },
   {
      "Type":"Transfers",
      "Name":"2",
      "Hyperlink":"#"
   },
   {
      "Type":"Tools",
      "Name":"1",
      "Hyperlink":"#"
   },
   {
      "Type":"Tools",
      "Name":"2",
      "Hyperlink":"#"
   }
]

推荐阅读