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

Issue

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

Solution

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

Answered By – Dheeraj Kumar

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.