как использовать ngfor для перебора свойства, которое представляет собой массив объектов в angular

Новичок в angular, извините, если это глупый вопрос или я неправильно его объясняю.

У меня есть компонент, который объявляет свойство ввода, называемое спутниками, которое обращается к массиву класса 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>

Любая информация о том, как сделать эту работу, или даже разъяснения были бы признательны, спасибо!


javascript angular ngfor
person Katie    schedule 17.12.2019    source источник
comment
‹Tr * ngFor = пусть новый ряд спутников› ‹td› {{newRow.Name}} ‹/td› ‹td› {{newRow.Type}} ‹/td› ... ‹/tr›?   -  person Gosha_Fighten    schedule 17.12.2019

Ответы (2)


arrow_upward
2
arrow_downward

Вы делаете это почти правильно, ваш ngFor работает, но когда вы печатаете newRow, вы печатаете весь объект, а не атрибуты.

Вам нужно представить атрибуты объекта, например:

<tr *ngFor="let newRow of satellites ">
   <td>{{newRow.name}}</td>
   <td>{{newRow.type}}</td>
   ...
</tr>
person Breno Antunes    schedule 17.12.2019

arrow_upward
0
arrow_downward

Просмотрите этот блог, в нем объясняется создание таблицы с помощью 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 = ['name', 'date'];

также в своем классе вы можете так объявлять свои массивы,

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