Angular Step by Step - 建立model，使用内嵌繫结、属性繫结、ngfor结构型指令

在recipes资料夹，输入ng g i recipe --type=model，新增Recipe Model。

结构图
recipes
|-- recipe.model.ts

在recipe interface 建立以下属性：

export interface Recipe {  name: string;  description: string;  imagePath: string;}

在recipe-list.component.ts，建立数笔範例资料：

recipes: Recipe[] = [    {      name: 'A Test Recipe',      description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, porro.',      imagePath: 'https://picsum.photos/100'    },    {      name: 'A Test Recipe',      description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, porro.',      imagePath: 'https://picsum.photos/100'    },    {      name: 'A Test Recipe',      description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, porro.',      imagePath: 'https://picsum.photos/100'    }  ];

Lorem Picsum，一个随机产生图片的网站，让我们省去找图的麻烦，并且可以直接在网址指定图片大小。

recipe-list.component.html，设计资料显示页面：

<div class="row">    <div class="col-12">        <button class="btn btn-success">New Recipe</button>    </div></div><div class="row">    <div class="col-12">        <a href="#" *ngFor="let recipe of recipes">            <div class="media mt-4">                <div class="media-body">                    <h5 class="mt-0 mb-1">{{ recipe.name }}</h5>                    <p>{{ recipe.description }}</p>                </div>                <img [src]="recipe.imagePath" class="ml-3" alt="...">            </div>        </a>        <app-recipe-item></app-recipe-item>    </div></div>

这边，使用了内嵌繫结、属性繫结、ngfor结构型指令技巧。

recipe-list.component.scss：

a {  color: #000000;}a:hover {  text-decoration: none;}

滑鼠经过a连结时，不要有底线，并且将文字由预设的蓝色改为黑色。

完成的页面：