Angular 2：在搜索建议中添加"See More"

Question

如果数据达到最小值 8，如何添加 "See More" link？您将如何将其附加到 *ngFor 中？还有别的办法吗？

下面是我在 html

中的现有代码

<div class="suggestion" *ngIf="results.length > 0 && suggest === true">
        <div *ngIf="results.length < 9; else seeMore">
             <div *ngFor="let result of results" class="search-res" > {{result.name}} </div>
        </div>
        <div #seeMore> See More </div>
</div>

Answer 1

您需要将 <div #seeMore> See More </div> 更改为

<ng-template #seeMore>
  <div>See More</div>
</ng-template>

要仅保留前 8 个结果然后追加查看更多 link 只需将 ngFor 更正为

*ngFor="let result of results.slice(1,9)"

因此您将只打印初始结果。您可能希望在每次 see more 单击后以编程方式更新 slice 方法的结束编号 9。

Angular 2：在搜索建议中添加"See More"

Angular 2: Add "See More" in Search Suggestion

angular2-template

ngfor

angular