Angular 11常用api

*ngFor渲染每个商品

<div *ngFor="let product of products">
</div>

[ ]属性绑定

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
    </a>
  </h3>

</div>

{{}}插值

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

</div>

*ngIf添加每个商品的描述信息

<div *ngFor="let product of products">

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

</div>

( )事件绑定

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

  <button (click)="share()">
    Share
  </button>

</div>