Angular 2 *ngFor 显示组件模板不工作

Question

我在 "results.component.ts" 中有这个 collection：results: Result[]

我想遍历 collection，显示每个结果。

我想要一个名为 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{}

如何将 1 个结果的结果数据从 results.component 传递到 result.component。

如何让 result.component.html 每个结果显示一次？

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

Angular 2 *ngFor 显示组件模板不工作

Angular 2 *ngFor display component template not working

templates

angular

ngfor