在控制台中获取数据但不在我的 html angular4 视图中

Question

我正在按名称搜索数据，效果很好，然后尝试获取搜索产品的详细信息（从产品数组访问单个产品的详细信息）。数据显示在控制台中，但未显示在我的 HTML 视图中。我的组件代码在这里

export class SearchdetailComponent implements OnInit {
  @Input() product: Product;

    ngOnInit() {
          this.getComponent();
       }
    goBack(): void {
    this.location.back();
  }
 private componentUrl = 'HereMyRestServicePostUrlGoes';
  constructor(private http:Http, private route: ActivatedRoute,
    private location: Location) {
     }

   getComponent(): Observable<Product[]> {
    const name = this.route.snapshot.paramMap.get('name');
    let obj = { name: name }
       let body = JSON.stringify(obj);
      let headers = new HttpHeaders();
         var config = {
                    headers : {
                        'Content-Type': 'application/json'
                    }
                };
      headers = headers.append('Content-Type' : 'application/json');
      const url = `${this.componentUrl}`;
      return this.http.post<Product[]>(url, body, config).map((res:Response) => res.json()).subscribe(product => { 
            this.product = product; 
            console.log(this.Product);
              );
            }
  }
}

HTML代码

<div class="wide">
</div>
<div class="hero-bkg-animated">
<h2>Product Details</h2>
<form class="form-style-9">
<div >

  <div>
<div class="table-responsive">    
<table *ngIf="product" class="table table-striped">
  <tr><td><b>Name</b></td><td>{{product.name}}</td></tr>
   <tr><td><b>Address</b></td><td>{{product.address}}</td></tr>
  </table>
  </div>
  <button (click)="goBack()">Go Back</button>
</div>
</div>
</form>
</div>

路由器代码：

 { path: 'detail/:name', component: SearchdetailComponent }

Console

Answer 1

*ngIf="product"

这没有任何意义，除非 product 是一个布尔值。

你需要像这样在属性上使用 if 条件

<div >
    <table *ngFor="let p of product" class="table table-striped">
      <tr *ngIf="p.name.length>0"><td><b>Name</b></td><td>{{p.name}}</td></tr>
       <tr *ngIf="p.address.length>0"><td><b>Address</b></td><td>{{p.address}}</td></tr>
      </table>

在控制台中获取数据但不在我的 html angular4 视图中

getting data in console but not in my html view in angular4

angular

angular-ui-router

angular4-forms

angular4-router

angular4-httpclient