尝试创建基本的 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部分）：向子组件传递数据