Angular 5 - 需要在表内创建多个行

Question

我有以下component.ts文件。

selector: 'app-product-search',
template: `
    <div class="col-lg-12">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>SKU</th>
                    <th>MRP</th>
                </tr>
            </thead>
            <tbody>
                    <my-product-list [product]="product" *ngFor="let product of products | product: searchText">
                   </my-product-list>
            </tbody>
        </table>
    </div>
`

以下HTML文件。

<tr>
    <td>{{ product.SKU }}</td>
    <td>{{ product.mrp }}</td>
</tr>

输出HTML是在单个列中压缩的单行。

 SKU           MRP
 ABC749XYZ849

理想的输出应该是。

 SKU           MRP
 ABC           749
 XYZ           849

我不知道为什么我会遇到这种奇怪的行为。