如何使用ngfor遍历作为角度对象阵列的属性

Question

[Angel的新手，很抱歉，如果这是一个愚蠢的问题，或者我没有正确解释。

我有一个组件，该组件声明一个名为satellite的输入属性，该属性访问Satellite类数组。我需要在ngFor循环中使用该属性来构建HTML表。我没有得到数组存储的信息，而是得到了这个输出

Name    Type    Operational Orbit Type  Launch Date
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

这里是输入属性

<app-orbit-list [satellites]="sourceList"></app-orbit-list>

及其访问的类

export class AppComponent {
  sourceList: Satellite[];

  constructor() {
    this.sourceList = [
       new Satellite("SiriusXM", "Communication", "2009-03-21", "LOW", true),
       new Satellite("Cat Scanner", "Imaging", "2012-01-05", "LOW", true),
       new Satellite("Weber Grill", "Space Debris", "1996-03-25", "HIGH", false),
       new Satellite("GPS 938", "Positioning", "2001-11-01", "HIGH", true),
       new Satellite("ISS", "Space Station", "1998-11-20", "LOW", true),
    ];
 }
}

这是我要在表中使用的ngFor循环

   <tr *ngFor="let newRow of satellites ">{{newRow}}</tr>

有关如何进行此工作或进行澄清的任何信息，谢谢！

Answer 1

您几乎可以正确执行此操作，您的ngFor可以正常工作，但是当您打印newRow时，您将打印整个对象而不是属性。

您需要显示对象的属性，如下所示：

<tr *ngFor="let newRow of satellites ">
   <td>{{newRow.name}}</td>
   <td>{{newRow.type}}</td>
   ...
</tr>

Answer 2

<tr *ngFor="let newRow of sourceList">
  <td>{{newRow.Name}}</td>
</tr>

Answer 3

查看此博客，它说明了如何使用ngFor创建表

https://medium.com/@mjthakur413/how-to-create-table-in-angular-7-using-ngfor-3c2c0875b955

您将需要像这样使用嵌套的* ngFor，

<tr *ngFor = "let row of exampleAray2">
    <td *ngFor = "let column of exampleArray">
      {{row[column]}}
    </td>
  </tr>

使用对象格式化数组

// headings   
exampleArray = [{name: 'Name', date: 'date'}, { /*your values*/ }];
// values
exampleAray2 = [{ /*your values*/ }, { /*your values*/ }];

也在类中，您也可以像这样声明数组，

export class AppComponent {
    // headings   
    exampleArray = [{name: 'Name', date: 'date'}, { /*your values*/ }];
    // values
    exampleAray2 = [{ /*your values*/ }, { /*your values*/ }];
    constructor() {
     // or you can initialize them here
     this.exampleArray = [{name: 'Name', date: 'date'}, { /*your values*/ }];
  }
}