Question

如何扩展afx_msg HBRUSH OnCtlColor( CDC* pDC, CWnd* pWnd, UINT nCtlColor );离子成分

<ion-item>

扩展组件让我们说一个自定义的<ion-list> <ion-item> <ion-thumbnail item-start> <img src="img/thumbnail-totoro.png"> </ion-thumbnail> <h2>My Neighbor Totoro</h2> <p>Hayao Miyazaki • 1988</p> <button ion-button clear item-end>View</button> </ion-item> </ion-list>并扩展逻辑和模板？

任何帮助表示赞赏！

Answer 1

如果您需要在同一页面中复制相同的组件 - 在您的情况下在列表中 - 您可以使用*ngFor迭代一个数组，然后渲染<ion-item>的数量相同作为数组长度。

让我们说你有这个数组：

public myMovies: any[] = [
  {title: 'Totoro', image: 'path/to/image.png', year: 1988},
  {title: 'Totoro', image: 'path/to/image.png', year: 1988},
  {title: 'Totoro', image: 'path/to/image.png', year: 1988},
  {title: 'Totoro', image: 'path/to/image.png', year: 1988}
];

您可以使用*ngFor呈现所有电影：

<ion-list>
  <ion-item *ngFor="let movie of myMovies">
    <ion-thumbnail item-start>
      <img [src]="movie.image">
    </ion-thumbnail>
    <h2>{{movie.title}}</h2>
    <p>Hayao Miyazaki • {{movie.year}}</p>
    <button ion-button clear item-end>View</button>
  </ion-item>
</ion-list>

这将在你的名单中复制Totoro电影4次。

如果您真的想要创建一个自定义组件，但是您只想将值传递给<custom-ion-item>标签，我建议您按照本教程进行操作：custom component < / p>

希望这有帮助。

如何扩展离子组件

1 个答案: