尝试进行[Angular]「开始基础的Angular应用程序」(2)
尝试创建基本的 Angular 应用程序 (2)。
[Angular] 試著開始一個基本的Angular應用程序(準備工作)
[Angular] 开始做一个基本的Angular应用程序 (1)
我正在尝试学习Angular的教程。
制作商品清单
Angular公式网页:创建商品清单
从今天开始,我们将正式推进教程。虽然只需要按照指示复制粘贴即可。
将以下标签写入product-list文件夹中的product-list.component.html文件中。
<div *ngFor="let product of products">
</div>
在
标签中写下面的
标签。
<div *ngFor="let product of products">
<h3>
{{ product.name }}
</h3>
</div>
*ngFor似乎像是一个for循环。
将{{ product.name }}用下面的a标签括起来。
<a [title]="product.name + ' details'">
{{ product.name }}
</a>
当您将鼠标悬停在产品名称上时,将显示相关文本。
根据我阅读的教程,似乎将方括号 [] 用作属性绑定。
在下方添加一个 p 标签。
<p *ngIf="product.description">
詳細: {{ product.description }}
</p>
当显示`product.description`时,*ngIf类似于if语句。
顺便问一下,product.description 是什么意思呢?
通过查看文件,看起来是在 products.ts 中进行描述的。
顺便提一下,具体内容如下。
export const products = [
{
name: 'Phone XL',
price: 799,
description: 'A large phone with one of the best screens'
},
{
name: 'Phone Mini',
price: 699,
description: 'A great phone with one of the best cameras'
},
{
name: 'Phone Standard',
price: 299,
description: ''
}
];
5.添加一个按钮。
在 product-list.component.html 中添加以下标签。
<button (click)="share()">
shareボタン
</button>
按键将被显示出来。(现在仅点击无法分享,仅显示消息。)
类似于(click)的用法被称为事件绑定。
以下是原文的汉语重新表达:
下一篇文章:[Angular] 尝试创建一个基本的Angular应用程序(第3部分):向子组件传递数据