Angular8。如何遍历数组数组

Question

我有一个产品列表，每个产品都有不同的颜色选项。我要显示每个产品，然后为每个产品在select框中为每个产品输出每个颜色选项。如何在产品数组中遍历颜色数组以在下面的代码中输出产品颜色？

this.products = [
    { id: 'p01', name: 'Sweater', price: 20, image: 'https://images.unsplash.com/photo-1575176648002-f2021e56b375?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80', color: ['blue', 'white', 'green'], size: ['22', '23', '24'] },
    { id: 'p02', name: 'Jean', price: 25, image: 'https://images.unsplash.com/photo-1542219550-37153d387c27?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', color: ['red', 'white', 'green'], size: ['22', '23', '24'] },
    { id: 'p03', name: 'Belt', price: 40, image: 'https://images.unsplash.com/photo-1515955656352-a1fa3ffcd111?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', color: ['brown', 'white', 'green'], size: ['22', '23', '24'] }
]

HTML模板

<div class="container">
<div class="row">
    <div class="col-sm-12 pb-2 col-md-6 pl-2 col-lg-4" *ngFor="let product of products; let i = index">
        <div class="card" style="width: 18rem;">
            <img src="{{product.image}}" width="80" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title text-centre">{{product.name}}</h5>
                <p class="card-text"> {{product.price}} usd</p>
                <hr>
                <select class="custom-select" >
                    <option *ngFor="let product of products">{{products[i].color}}</option>
                </select>
                <a [routerLink]="['/cart', { id:product.id }]" class="btn btn-primary"><i class="fa fa-plus">Order
                        Now</i></a> 
            </div>
        </div>
    </div>
</div>