定义数据模型
1.传统方法
export class ingredient{
public name:string;
public amount:number;
constructor(name:string,amount:number){
this.name=name;
this.amount=amount;
}
}
2.简写方法(上面的一串代码可简写为:)
export class ingredient{
constructor(public name:string,public amount:number){}
}
引用数据模型
在引用数据的html文件的大文件夹中找ts后缀的文件 添加模块和路径
import {Ingredient} from '../shared/ingredient.model';
再在下面实例化
然后在html页面进行相应的展示设置,一般要用*ngFor循环将里面的内容显示
<ul>
<li *ngFor="let ingredient of ingredients">
<a>{{ingredient.name}}</a>
<span style="margin-left:20px">{{ingredient.amount}}</span>
</li>
</ul>
效果: