Question

我目前有一个search feature，允许用户添加搜索过滤器。例如。如果我添加linear algebra，probability和data science，则视图将显示每个过滤器的垂直列表和锚标记：

<div *ngFor="let term of searchTerms"> 
  <div style="display: inline-block;"> {{term}} </div>
  <a style="color: indianred; display: inline-block; padding-left: 6px;" (click)="removeTerm(term)">✖</a>
</div>

我想水平显示这些元素，我研究了angular/flex-layout，但它与有角版本4.4.5不兼容

我尝试将每个术语设置为列表元素，并将其包装在菜单div中并更改CSS（https://stackoverflow.com/a/2145208/6521206），但这也不起作用。

其次，我想通过一些看上去更简洁的筹码（for example）来显示这些条款。我已经研究了一些chip alternatives，但这些对我而言似乎太过沉重。是否有提供简单标签like this one的简单引导程序或CSS实现？

谢谢！

Answer 1

<div *ngFor="let term of searchTerms"> 
  <div class="badge badge-primary"> {{term}} </div>
  <a style="color: indianred; display: inline-block; padding-left: 6px;" (click)="removeTerm(term)">✖</a>
</div>

如果您想要更时尚，也可以使用按钮。

Answer 2

在Bootstrap中，最接近芯片的是徽章-https://getbootstrap.com/docs/4.0/components/badge/

Answer 3

在搜索引导程序文档并使用用户建议之后，我整理了以下解决方案：

<div class='container'>
    <div class="row">
          <div class="list-inline">
             <div *ngFor="let term of searchTerms" class="col-md-2" style="padding: 7px;">
                <div class="list-inline-item">
                    <span class="badge badge-pill"> {{term}} <a (click)="removeTerm(term)">✖</a>  </span> 
             </div>
          </div>
    </div>
   </div>
</div>

角度NgFor元素水平显示为标签

3 个答案: