如何遍历对象数组并使用 angular 将其显示在 UI 中 8

Question

我正在尝试遍历对象数组并使用 Angular 8.

在 html 中显示它

我的app.component.ts文件如下图：

import { Component } from '@angular/core';
import * as Chart from 'chart.js'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`canvas {margin-top:50px}`]
})
export class AppComponent {
  public uptimeDataSet: Array<{ [key: string]: string | any }>;
  title = 'angular8chartjs';
  canvas: any;
  ctx: any;
  ngAfterViewInit() {
    this.canvas = document.getElementById('myChart');
    this.ctx = this.canvas.getContext('2d');
  

    this.uptimeDataSet = [
      { status: 'up',
       node: 'abcd',
        duration: '2hr 45mins'
      },
      { status: 'down',
       node: 'efg',
        duration: '2hr 45mins'
      },
      { status: 'left',
       node: 'hij',
        duration: '2hr 45mins'
      },
      { status: 'right',
       node: 'klm',
        duration: '2hr 45mins'
      },
      { status: 'sideways',
       node: 'nop',
        duration: '2hr 45mins'
      }
    ]
  }
}

在上面的代码中，uptimeDataSet 是我需要循环并显示在另一个组件上的数据数组。

我的 app.component.html 文件如下所示：

<app-uptime-chart 
        *ngFor="let item of uptimeDataSet"
        [chartData]="uptimeDataSet"
    >

最后，我试图在我的组件中循环以显示 uptime-chart-component.html 中的对象，如下所示：

<div>
   <ul *ngFor="let data of chartData">
    <li>{{data.status}}</li> <p class="right-text">{{data.node}}</p>
   </ul>
   <hr>
</div>

uptime-chart.component.ts 文件如下所示：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-uptime-chart',
  templateUrl: './uptime-chart.component.html',
  styleUrls: ['./uptime-chart.component.css']
})
export class UptimeChartComponent implements OnInit {
  
  constructor() { }

  ngOnInit(): void {
   
  }

  
}

但我无法在 UI 中获得详细信息。我无法找出我要去哪里错了。有人可以帮我解决这个问题吗？

Answer 1

更新您的 uptime-chart.component.ts 文件-

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-uptime-chart',
  templateUrl: './uptime-chart.component.html',
  styleUrls: ['./uptime-chart.component.css']
})
export class UptimeChartComponent implements OnInit {

  @Input() chartData: any[];
  
  constructor() { }

  ngOnInit(): void {
   
  }

  
}

您需要使用@Input 来捕获子组件中的值。当您将数据从父级传递给子级时，使用@Input 装饰器。我建议你看看这个博客来理解- https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/

而且我相信，您可以在不使用 *ngFor-

的情况下更改 app.component.html

<app-user [chartData]="uptimeDataSet"></app-user>

如果这就是您想要的结果

如何遍历对象数组并使用 angular 将其显示在 UI 中 8

How to loop over an array of objects and display it in UI using angular 8

angular8