i have collection in "results.component.ts": results: result[]
i iterate on collection, displaying each result.
i have seperate component called result.component.ts. because result complex , large.
what have far not displaying anything. output html has commented out template bindings:
<div _ngcontent-fud-12="" class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 offset-xl-4"> <!--template bindings={ "ng-reflect-ng-for-of": "[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object],[object object]" }--><!--template bindings={}--><!--template bindings={}--><!--template bindings={}--><!--template bindings={}--><!--template bindings={}--><!--template bindings={}--><!--template bindings={}--><!--template bindings={}--><!--template bindings={}--><!--template bindings={}--> </div> here relevant code:
results.component.html:
<div id="results" class="text-uppercase"> <div id="up-button-row" class="row"> <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 offset-xl-4"> <button class="m-x-auto" md-fab [disableripple]="true" (click)="scrollup()"></button> </div> </div> <div class="row" *ngif="noresults"> <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 offset-xl-4"> <h2 class="m-x-auto">no vegan stuff found :-(</h2> </div> </div> <div class="row" *ngif="!noresults"> <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 offset-xl-4"> <div *ngfor="let result of results"><result></result></div> </div> </div> </div> results.component.ts:
import { component, afterviewinit } '@angular/core'; import { resultcomponent } './result.component'; import { result } '../result' @component({ selector: 'results-div', templateurl: 'app/find-page/results.component.html', styleurls: ['app/find-page/results.component.css' ], directives:[resultcomponent] }) export class resultscomponent implements afterviewinit { results: result[]; noresults: boolean; ngafterviewinit() { this.scrolldown(); } scrolldown() { scrolltoanchor.gototargetbottom("#results"); } scrollup() { scrolltoanchor.gototarget("#find-page"); } } result.component.html:
<div class="col-sm-6 col-lg-2" style="margin-top:20px; padding: 25px;"> <div class="product-item scale-on-hover" (click)="setcurrentlyselectedproduct()"> <div [ngstyle]="{background: result.imagepath}" id="image"></div> <div id="info"> <h6 id="brand" class="medium-text">{{brand}}</h6> <h6 id="name" class="medium-text">{{name}}</h6> </div> </div> </div> result.component.ts:
import { component, afterviewinit } '@angular/core'; import { result } '../result'; @component({ selector: 'result', templateurl: 'app/find-page/result.component.html', styleurls: ['app/find-page/result.component.css' ] }) export class resultcomponent{} how pass result data 1 result results.component result.component.
how result.component.html display once each result?
@component({ selector: 'result', templateurl: 'app/find-page/result.component.html', styleurls: ['app/find-page/result.component.css' ] }) export class resultcomponent{ @input() result; } <div *ngfor="let result of results"><result [result]="result"></result></div> <div class="col-sm-6 col-lg-2" style="margin-top:20px; padding: 25px;"> <div class="product-item scale-on-hover" (click)="setcurrentlyselectedproduct()"> <div [ngstyle]="{background: result.imagepath}" id="image"></div> <div id="info"> <h6 id="brand" class="medium-text">{{result.brand}}</h6> <h6 id="name" class="medium-text">{{result.name}}</h6> </div> </div> </div> 
Comments
Post a Comment