角4中带有阅读更多链接的多个复选框

【问题标题】：multiple checkbox with read more link in angular 4角4中带有阅读更多链接的多个复选框
【发布时间】：2018-01-10 18:41:55
【问题描述】：

Multiple checkbox with angular 4

我在 Angular 4 中有一个场景，其中有 10 个或更多材料复选框，但我想将复选框限制为 3，但是当我单击“阅读更多”链接时，它应该显示所有复选框。请帮助实现这是角度4？我正在使用的示例角度材料代码：：

      <h3>Village(s)</h3>
  <md-selection-list #village value="village"> 
    <md-list-option *ngFor="let item of data.villages" [value]="item" (click)="submit(item)">
      {{item}}
    </md-list-option>
  </md-selection-list>

【问题讨论】：

标签： javascript angular checkbox angular-material2

【解决方案1】：

最简单的方法是使用类切换器并将其应用于<md-selection-list>：

CSS：

 .more {
      overflow: hidden;
      height: 10rem // calculate height of md-list-option * 4
    }

HTML：

 <md-selection-list #village value="village" [ngClass]="{'more': village.length > 4}">

最后，在<md-selection-list> 之后添加span 或div 元素以获取更多链接：

<div (click)="village.classList.remove('more')">Read more</div>

【讨论】：

上面的代码根本不工作...我想要 4 个默认的复选框（在原始状态），点击“阅读更多”，我想显示所有的复选框。@simpleDmitry