Html 自举不'；无法识别与*ngFor一起使用的tr环路

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

Bootsrap响应表在与loop*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>

名字
姓
位置
办公室
年龄
开始日期
薪水
Extn。
电子邮件
{{product.productName}
{{product.productDesc}}
{{product.productName}
{{product.productDesc}}
{{product.productName}
{{product.productDesc}}
{{product.productName}
{{product.productDesc}}
{{product.productDesc}}

服务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')

      }

    }

从'@angular/core'导入{Injectable}；
从“@angular/common/http”导入{HttpClient}；
从“rxjs/Observable”导入{Observable}；
@可注射（）
出口类产品服务{
构造函数（专用http:HttpClient）{
}
getAll（）：可观察{
返回此.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;});

      }
    }

从'@angular/core'导入{Component，OnInit}；
从“./shared/product/product.service”导入{ProductService}；
从“@angular/Router”导入{ActivatedRoute，Router}”；
@组成部分({
选择器：“应用程序产品”，
templateUrl:“./product.component.html”，
样式URL:['./product.component.css']
})
导出类ProductComponent实现OnInit{
产品:阵列;；
建造商（私有产品服务：产品服务、，
专用路由：激活的路由，
专用路由器：路由器{}
恩戈尼尼特（）{
this.productService.getAll（）.subscribe（数据=>{
this.products=data；}）；
}
}

您在模块中的导入是否正确？你确定它不能自己识别？如果我没有弄错的话，*ngFor是CommonModule的一部分，应该导入到app.module.ts*ngFor中，结果显示填充的表没有任何问题，问题在于引导响应表显示“表中没有可用数据”，但当我使用不带循环的tr标记时，它显示“1 entrie”。是否有可能在代码段中复制此问题？或在表*ngIf=“isDataLoaded”中添加条件。默认情况下，isDataLoaded=false。当从API接收到数据时，将isDataLoaded设置为true。@MukeshKumar您能解释更多吗。。。我确实在桌子上试过*ngIF=“isDataLoaded”，但没有效果