Angular 2：在搜索建议中添加“查看更多”

【问题标题】：Angular 2: Add "See More" in Search SuggestionAngular 2：在搜索建议中添加“查看更多”
【发布时间】：2017-12-01 12:43:34
【问题描述】：

如果数据达到最少 8 个，如何添加“查看更多”链接？你将如何将它附加到*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>

【问题讨论】：

但是正如您所做的那样，当结果超过 9 时，您不会显示最初的 9，只显示 See More 文本？

标签： angular angular2-template ngfor

【解决方案1】：

你需要把<div #seeMore> See More </div>改成

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

要仅保留前 8 个结果，然后附加查看更多链接，只需更正您的 ngFor 与

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

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

【讨论】：

我希望在第 8 项 @crash 之后附加“查看更多”