Bootstrap无法识别与* ngFor

Question

我实际上陷入了一个非常奇怪的问题。

Bootsrap响应表在与循环* ngFor一起使用时无法识别数据，但在仅使用标记时就可以识别它们。

页面可以编译，没有任何错误，并且表格元素可以正确显示，但是引导程序无法识别它。

我尝试了ng-repeat，但结果只是空白页。

<table id="datatable-responsive" 
       class="table table-striped table-bordered dt-responsive nowrap" 
       cellspacing="0" 
       width="100%">
    <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
    </thead>
    <tbody>
      <tr *ngFor="let product of products;">
        <td>
          {{product.productName}}
        </td>
        <td>
          {{product.productDesc}}
        </td>
        <td>
          {{product.productName}}
        </td>
        <td>
          {{product.productDesc}}
        </td>
        <td>
          {{product.productName}}
        </td>
        <td>
          {{product.productDesc}}
        </td>
        <td>
          {{product.productName}}
        </td>
        <td>
          {{product.productDesc}}
        </td>
        <td>
          {{product.productDesc}}
        </td>
      </tr>
    </tbody>
</table>

服务product.service.ts：

    import { Injectable } from '@angular/core';
    import { HttpClient} from "@angular/common/http";
    import { Observable} from "rxjs/Observable";


    @Injectable()
    export class ProductService {

      constructor(private http: HttpClient) {


      }

      getAll(): Observable<any> {

        return this.http.get('//localhost:8080/api/products')

      }

    }

product.component.ts：

    import { Component, OnInit } from '@angular/core';
    import { ProductService} from "../shared/product/product.service";
    import {ActivatedRoute, Router} from "@angular/router";

    @Component({
      selector: 'app-product',
      templateUrl: './product.component.html',
      styleUrls: ['./product.component.css']
    })
    export class ProductComponent implements OnInit {

      products: Array<any>;

      constructor(private productService: ProductService,
                  private route: ActivatedRoute,
                  private router: Router) {}



      ngOnInit() {

        this.productService.getAll().subscribe(data => { 
    this.products=data;});

      }
    }