Перейти к содержанию

Добавление данных в Компонент

\app\recipes\recipe-list\recipe-list.component.ts:

//Импорт модели:
import { Recipe } from '../recipe.model'

//Добавление массива объектов:
export class RecipeListComponent implements OnInit {
  recipes: Recipe[] = [
    new Recipe(
      'Test recipe',
      'This is a simple test',
      'https://cdn.pixabay.com/photo/2017/07/16/10/43/recipe-2508859_960_720.jpg'
    )
  ]
  // ...
}

recipes: Recipe[] - переменная recipes с типом массив объектов класса Recipe (Typescript синтаксис).

\app\recipes\recipe-list\recipe-list.component.html:

<div class="row">
  <div class="col-xs-12">
    <button class="btn btn-success">New Recipe</button>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <a href="#" class="list-group-item clearfix">
        <div class="pull-left">
          <h4 class="list-group-item-heading">Recipe Name</h4>
          <p class="list-group-item-text">Description</p>
        </div>
        <span class="pull-right">
          <img src="" alt="" class="img-responsive" style="max-height: 50px;" />
        </span>
      </a>
      <app-recipe-item></app-recipe-item>
    </div>
  </div>
</div>