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

Question

I am searching data by name which is working fine, then trying to get the details of searched product (accessing single product detail from the product array). The data is getting displayed in console but not in my HTML view. Here my component code goes

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 code

<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>

Router code:

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

Console

Answer 1

*ngIf="product" 

This doesnt mean anything unless product is a boolean.

You need to use if condition on property like this

<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>