2016-11-10 60 views
2

我見過* ngFor用於從父模板重複子模板,並且也看到它在子模板本身內部使用。是否有這些情況應該被優先考慮?應該* ngFor由模板在內部使用,還是應該在外部使用?

<div class="results"> 
    <app-result-tile 
    *ngFor="let d of service.data" 
    [data]="d"> 
    </app-property-tile> 
</div> 

還是應該將ngFor移動到<app-result-tile>組件?

<div class="results"> 
    <app-result-tiles 
    [data]="service.data"> <!-- results now repeat internally with li's or something.--> 
    </app-result-tiles> 
</div> 

我將編寫一個管道來過濾來自父組件的結果組件。在這種情況下使用第一種方法會更有意義嗎?

+0

它屬於要提供service.data或每個service.data進行處理所需的。也許你只能使用與每個service.data一起使用的子模板,因此應該使用第一種方法。 –

回答

1

這裏的問題是迭代項目是否應該形成一個單獨的組件。

答案是YES如果迭代項目將被自己使用。

如果它現在和未來都會毫無例外地永遠不會被自己使用但總是在列表中,那麼應該在子組件內部使用ngFor *。

如果有管道過濾或不在ngFor *上是不相關的。

+0

我唯一擔心的就是過濾性能,但我不確定是否還有其他問題需要考慮。感謝您花時間幫助我。 – JordanFrankfurt

3

兩者都有效。這取決於你的用例。

前者將創建app-result-tiles組件的不同實例以及相關數量的模板,稍後將創建組件的一個實例和單個模板。

+0

我編輯了我的問題以更好地解釋情況。由於我的過濾標準來自父組件,我應該更喜歡第一種模式嗎? – JordanFrankfurt

相關問題