如何綁定到 angular 11 中的數組

Question

我如何綁定到 angular 11 中的數組？ 我的變量看起來像

const DISH = {
        id: '0',
        name: 'Uthappizza',
        image: '/assets/images/uthappizza.png',
        category: 'mains',
        featured: true,
        label: 'Hot',
        price: '4.99',
        // tslint:disable-next-line:max-line-length
        description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
        comments: [{
            rating: 5,
            comment: 'Imagine all the eatables, living in conFusion!',
            author: 'John Lemon',
            date: '2012-10-16T17:57:28.556094Z'
        }],
}

我可以裝箱然后命名為

<h3>{{dish.name | uppercase}}</h3>

但是我如何綁定到評論數組？

Answer 1

您可以在使用 Angular 的*ngFor循環時顯示注釋，因為它是一個注釋數組（列表）。 它在 Angular 文檔中描述了如何使用它，它基本上是 HTML 中的 for 循環。 dish.comments每個item dish.comments被循環，並且item.comment （指的是dish.comments.comment ）被打印在段落元素中。

<h3>{{ dish.name }}</h3>

<ul>
  <li *ngFor="let item of dish.comments">
    <p>{{ item.comment }}</p>
  </li>
</ul>

如果有更多評論，它們將顯示在列表中。 有關代碼，請參閱此 StackBlitz 示例。