angular 模板语法中的 @for 结构

Min_nna

于 2025-03-25 15:15:18 发布

阅读量961

点赞数 7

分类专栏： angular.js课程文章标签： angular.js 前端 javascript

本文链接：https://blog.csdn.net/Min_nna/article/details/146502432

版权

渲染列表

开发者遇到的另一个常见场景是需要渲染一些列表条目。

@for 控制块

类似于 JavaScript 的 for…of 循环，Angular 提供了 @for 控制块来渲染重复的元素。

<ul>
  @for (ingredient of ingredientList; track ingredient.name) {
   
    <li>{
   {
    ingredient.quantity }} - {
   {
    ingredient.name }}</li>
  }
</ul>

// ingredient-list.component.ts
@Component({
   
  standalone: true,
  selector: 'ingredient-list'

最低0.47元/天解锁文章