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

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>