Question

我的某些代码为*ngFor的md-selection-list，例如[sport,relax,..]

标记存储在this.tags中，所选标记存储在this.tab

中

我想阻止用户选择超过5个标签。因此，如果用户选择第5项，则应该有一些警报，并且只有在取消选中某些已检查项目时，用户才能键入不同的标记。

我从这段代码开始，但它不起作用。我尝试禁用此功能＆＃34;检查＆＃34; list-item上的图标，然后不将该项添加到this.tab，直到用户存储了＆lt; 5标签。问题是我无法禁用此功能＆＃34;检查＆＃34;图标。

这是代码：

clickedOnRow(row){

if(this.tab.length > 5){

  this.tags.forEach((item,index) =>{
    if(item.text == row.text){

      this.selectedList.nativeElement.children[index].children[0].children[1].classList.remove('mat-pseudo-checkbox-checked')
      this.selectedList.nativeElement.children[index].children[0].children[1].className = 'mat-pseudo-checkbox'
    }
  });

}else{
  this.tab.push(row.text);
}
}

您如何看待这个？如何解决这个问题呢？也许其他一些解决方案更容易？是为了这个问题吗？

感谢您的帮助

Answer 1

当所选计数达到某个限制时，您可以禁用未选择的选项，

<mat-selection-list #shoes>
  <mat-list-option
      #shoe
      *ngFor="let shoeType of typesOfShoes"
      [disabled]="shoes.selectedOptions.selected.length > 2 && !shoe.selected">
    {{shoeType}}
  </mat-list-option>
</mat-selection-list>

WORKING EXAMPLE

-

更新了选择最终选项时显示警告的示例

EXAMPLE

说实话，我对此很懒，而且可能有更好的方法，但它确实有效。选择列表也有一个改进的selectionChange事件，将在下一个版本中引入。我认为点击处理程序是你现在可以做的最好的。

如何在MD选择列表Angular2中设置已检查元素的最大限制

1 个答案: