Типизированный массив Typescript, не отображающий данные

Question

Я использую Angular 7 и Typescript 3 для создания предварительно заполненного массива ингредиентов в сервисе, который будет использоваться в компоненте, но когда я распечатываю массив на консоль, я получаю массив пустых объектов.

Если я создам типизированный массив с использованием литералов объекта, он будет работать, но если я создам массив с помощью оператора new, массив не будет содержать никаких данных.

РЕДАКТИРОВАНИЕ: Добавлен фрагмент класса ингредиентов

export class Ingredient {
    constructor(name?: string, amount?: number, measurement?: string) {}
}

Содержит данные:

export class ShoppingListService {
  private ingredients: Ingredient[] = [{
    name: 'shrimp',
    amount: 1,
    measurement: 'cup'
  },
  {
    name: 'bib lettuce',
    amount: 1,
    measurement: 'bunch'
  }];
  constructor() { 
   console.log('ingredients', this.ingredients);
   }

вывод на консоль:

ingredients [{name: "shrimp", amount: 1, measurement: "cup"},
             {name: "bib lettuce", amount: 1, measurement: "bunch"}
            ]

Это не содержит данных

export class ShoppingListService {
  private ingredients = [
    new Ingredient('shrimp', 1, 'cup'),
    new Ingredient('bib lettuce', 1, 'bunch')
  ];

  constructor() {
    console.log('ingredients', this.ingredients);
   }
}

вывод на консоль:

ingredients [Ingredient{}, Ingredient{}]

Я также пытался использовать следующий синтаксис, но получаю тот же вывод, что и в примере выше:

private ingredients: Ingredient[] = [
    new Ingredient('shrimp', 1, 'cup'),
    new Ingredient('bib lettuce', 1, 'bunch')
  ];

есть какая-то машинописная или угловая логика, которую мне здесь не хватает? Приведенный выше пример используется в документах Angular здесь: Angular: использование класса Героев

Answer 1

**Working code for both scenario** 


//ingredient.ts

export class Ingredient{
  constructor(public  name: string, public id: number, public measurment: string){
  }  
}

//ingredient.component.ts

    import {Component} from '@angular/core';
    import { Ingredient } from './ingredient ';
    @Component({
      selector: 'app-ingredient',
      template: 'Ingredient'
    })
    export class IngredientComponent{
        private ingredients: Ingredient[] = [{
        name: 'shrimp',
        id: 1,
        measurment: 'cup'
      },
      {
        name: 'bib lettuce',
        id: 1,
        measurment: 'bunch'
      }];
    /*
      ingredients = [
        new Ingredient('shrimp', 1, 'cup'),
        new Ingredient('bib lettuce', 1, 'bunch')
      ];
    */

      constructor(){
    console.log(this.ingredients);
      }
    }

Answer 2

Так что я думаю, что вам нужны эти изменения в вашем классе ингредиентов

export class Ingredient {
   constructor(data?: any) {
     this.name = data.name;
     this.amount = data.amount;
     this.measurement = data.measurement;
   }
   public name: string = null;
   public amount: number = null;
   public measurement: string = null;
}

И внутри вашего компонента для установки данных

 private ingredients = [
    new Ingredient({
     name: 'bib lettuce',
     amount: 1, 
     measurement: 'bunch'
    })
  ];

console.log(ingredients);

Я надеюсь, что это поможет вам