我在“results.component.ts”中有这个集合:results: Result[]
我想迭代整个集合,显示每个结果。
我想为这个名为result.component.ts的单独组件。这是因为结果会变得复杂和庞大。
到目前为止,我没有显示任何内容。输出html有一些注释掉的模板绑定:
<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>
以下是我的相关代码:
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 } from '@angular/core';
import { ResultComponent } from './result.component';
import { Result } from '../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 } from '@angular/core';
import { Result } from '../result';
@Component({
selector: 'result',
templateUrl: 'app/find-page/result.component.html',
styleUrls: ['app/find-page/result.component.css' ]
})
export class ResultComponent{}
如何将results.component的1个结果的结果数据传递给result.component。
如何让result.component.html为每个结果显示一次?
答案 0 :(得分:1)
@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>