Angular good practice - 新增ingredient Model、shopping list edi

由于ingredient model会有数个component共享，所以将之放入共享资料夹，会较适合。

结构：
app
|-- shared
   |--- ingredient.model.ts

ingredient.model.ts内容：

export interface Ingredient {  name: string;  amount: number;}

在shopping-list新增ingredient阵列

ingredients: Ingredient[] = [    { name: 'apple', amount: 5 },    { name: 'orange', amount: 10 },  ];

使用ngFor显示资料

<div class="row">  <div class="col-10">    <app-shopping-edit></app-shopping-edit>    <hr>    <div class="list-group">      <a class="list-group-item list-group-item-action" style="cursor: pointer;" *ngFor="let ingredient of ingredients">        {{ ingredient.name }} ({{ ingredient.amount }})      </a>    </div>  </div></div>

显示：

shopping-edit.component.html内容：

<div class="row">  <div class="col-12">    <form>      <div class="form-row">        <div class="form-group col-sm-5">          <label for="name">Name</label>          <input type="text" class="form-control" id="name">        </div>        <div class="form-group col-sm-2">          <label for="amount">Amount</label>          <input type="number" class="form-control" id="amount">        </div>      </div>      <div class="row">        <div class="col-12">          <button class="btn btn-success mr-2" type="submit">Add</button>          <button class="btn btn-danger mr-2" type="button">Delete</button>          <button class="btn btn-primary" type="button">Clear</button>        </div>      </div>    </form>  </div></div>

显示：