Fatal编程技术网
  • javascript/
  • Javascript *ngFor循环无法在Angular 9中显示json数据

Javascript *ngFor循环无法在Angular 9中显示json数据

javascript html angular

Javascript *ngFor循环无法在Angular 9中显示json数据,javascript,html,angular,Javascript,Html,Angular,我正在Angular 9应用程序中读取一个本地json文件，并试图将结果显示到app.component.html。我在这里花了相当多的时间研究和尝试不同的技术，例如*NGO，用于循环httpClient.get调用返回的数据，存储在this.initialData变量中，以及使用技术将数据集转换为对象数组的数组，存储在this.dataValues变量中。我在每次循环尝试后都发布了截图，替换了变量。如果您能提供任何关于如何实现此功能的反馈，我将不胜感激。目前为止，数据不会呈现到页面上，而是会向

我正在Angular 9应用程序中读取一个本地json文件，并试图将结果显示到app.component.html。我在这里花了相当多的时间研究和尝试不同的技术，例如*NGO，用于循环httpClient.get调用返回的数据，存储在
this.initialData
变量中，以及使用技术将数据集转换为对象数组的数组，存储在
this.dataValues
变量中。我在每次循环尝试后都发布了截图，替换了变量。如果您能提供任何关于如何实现此功能的反馈，我将不胜感激。目前为止，数据不会呈现到页面上，而是会向我将发布的控制台抛出错误。我能够=使用console.log（）查看变量是否填充了JSON数据

以下是json文件：

{
  "data": [
    {
      "id": 18,
      "internal_name": "scone_birthday",
      "type": "coupon",
      "description": "Free Scone awarded for a members birthday",
      "heading": "Toast to your birthday!",
      "subheading": "Our gift to you",
      "body": "This is the body for the <span style='font-family: \"Times New Roman\", Times, serif;'><strong><em><span style=\"color: rgb(0, 198, 255);\">birthday offer.</span></em></strong></span><span style=\"font-family: Georgia,serif;\"></span>",
      "subject": "",
      "details": "This is the details for the birthday <strong>offer</strong>.",
      "action": "",
      "image1_bg": "",
      "image_url": "images/birthday_candle.png",
      "respondable": true,
      "metric_amount": "150.0",
      "metric_name": "spend",
      "usage_end_date": "2020-11-05T23:59:59.000+11:00"
    },
    {
      "id": 4,
      "internal_name": "voucher",
      "type": "coupon",
      "description": null,
      "rank": "1.0",
      "start_date": null,
      "end_date": null,
      "heading": "HighFIVE!",
      "subheading": "You&#39;ve got $5 of dough*",
      "body": "Redeem for a $5 reward. <a href=\"https://en.wikipedia.org/wiki/Lorem_ipsum\" rel=\"noopener noreferrer\" target=\"_blank\">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      "subject": "Subject",
      "details": "",
      "action": "",
      "image1_bg": "",
      "image_url": "images/five_dollar.png",
      "respondable": true,
      "metric_amount": "200.0",
      "metric_name": "point",
      "usage_end_date": "2020-11-08T23:59:59.000+11:00"
    },
    {
      "id": 19,
      "internal_name": "loaf_welcome",
      "type": "coupon",
      "description": "Onboarding offer for member - free loaf ",
      "start_date": null,
      "end_date": null,
      "heading": "Get a slice of delight",
      "subheading": "Treat Yourself",
      "body": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
      "subject": "",
      "details": "",
      "action": "",
      "image1_bg": "",
      "image_url": "images/gift.png",
      "respondable": true,
      "metric_amount": "100.0",
      "metric_name": "spend",
      "usage_end_date": "2020-12-30T23:59:59.000+11:00"
    }
  ]
}
这是相应的屏幕截图：

带有
dataValues
变量的app.component.html：

<app-header></app-header>
<table class="table table-striped">
  <thead>
  <tr>
    <td>Data Values 1</td>
    <td>Data Values 2</td>
    <td>Data Values 3</td>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let column of initialData[0]; let indx = index">
    <td>
      {{initialData[0][indx]}}
    </td>
    <td>
      {{initialData[1][indx]}}
    </td>
    <td>
      {{initialData[2][indx]}}
    </td>
  </tr>
  </tbody>
</table>

<app-header></app-header>
<table class="table table-striped">
  <thead>
  <tr>
    <td>Data Values 1</td>
    <td>Data Values 2</td>
    <td>Data Values 3</td>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let column of dataValues[0]; let indx = index">
    <td>
      {{dataValues[0][indx]}}
    </td>
    <td>
      {{dataValues[1][indx]}}
    </td>
    <td>
      {{dataValues[2][indx]}}
    </td>
  </tr>
  </tbody>
</table>



非常感谢您的帮助
 问题是您试图迭代对象而不是数组
initialData[0]

如果你这样做


<tr *ngFor="let column of initialData.data; let indx = index">






或者最好这样做


//  app ts
    this.http.get('assets/rewards.json').subscribe({ data } => {
    ...
    }

// and then in html you can keep it like this

<tr *ngFor="let column of initialData; let indx = index">




//应用程序ts
this.http.get（'assets/rewards.json'）.subscribe（{data}=>{
...
}
//然后在html中，你可以像这样保存它


当你得到一个错误，说ngFor只能使用Iterable对象，这几乎意味着你不是在一个列表上迭代

它应该很好用

但是tbh，我不确定您在这里试图实现什么，如果您试图将每个键作为一列进行检查，那么您应该首先提取键


// ts file
const columns = Object.keys(this.initialData)

// and in html
<tr *ngFor="let c of columns">
    <td> {{ initialData[0][c] }} </td>
    <td> {{ initialData[1][c] }} </td>
    <td> {{ initialData[2][c] }} </td>
</tr>




//ts文件
const columns=Object.keys（this.initialData）
//和html格式
{{initialData[0][c]}
{{initialData[1][c]}
{{initialData[2][c]}


或者更好、更安全的解决方案（不是硬编码的项目数量）


//ts文件
const columns=Object.keys（this.initialData）
//和html格式
{{data[c]}

不完全确定您试图执行的操作，但似乎数组实际上位于嵌套属性
数据
中。您可以使用
array#map
仅提取特定属性，并在模板中使用
async
管道来避免订阅

试试下面的方法

控制器


从“@angular/core”导入{Component，OnInit}；
从“rxjs”导入{observeable}；
从“rxjs/operators”导入{map}；
@组件（{…}）
导出类HomeComponent实现OnInit{
dataValues$：可观察

更新：在控制器中迭代数组
要在控制器中使用响应，可以跳过
async
管道并在控制器中订阅

试试下面的方法


导出类HomeComponent实现OnInit{
构造函数（私有数据服务：数据服务）{}
恩戈尼尼特（）{
这个.dataService.getRewards（）.subscribe({
下一步：（数据：任意）=>{
data.data.forEach（（项目：任意）=>{
控制台日志（项目）；
console.log（“id:，item.id”）；
console.log（“内部\u名称：”，item.internal\u名称）；
//做点别的
});
}
});
}
}



工作示例：
我以前尝试过管道实现，但这次由于您建议的其他组件，它成功了……最终我需要获得这些结果并对其运行逻辑。我想知道如何循环，以便从每个子数组中的每个键获取所有值？我真的需要打印所有数据。@DanielGrindstaff just po指出这里有大量的
any
类型（不应该在最终代码中）另外，不鼓励使用
sanitizer.bypassSecurityTrustHtml
，尤其是当使用来自外部源的数据时……正如它所说，您绕过了安全检查……如果您使用此示例，您根本不需要使用管道，因为数据不是用HTML编写的，只需使用
{column}
@DanielGrindstaff:若要使用控制器中的对象，您可以跳过
异步
并订阅控制器中的可观察对象。我已更新了答案。@TomaszGolinski感谢您的捕获，我应该明确地设置所有所需的返回值。

// ts file
const columns = Object.keys(this.initialData)

// and in html
<tr *ngFor="let c of columns">
    <td> {{ initialData[0][c] }} </td>
    <td> {{ initialData[1][c] }} </td>
    <td> {{ initialData[2][c] }} </td>
</tr>




// ts file
const columns = Object.keys(this.initialData)

// and in html
<tr *ngFor="let c of columns">
    <td *ngFor="let data of initialData"> {{ data[c] }} </td>
</tr>