如何在 MD-selection-list Angular2 中设置检查元素的最大限制

Posted 2023-03-13

【中文标题】如何在 MD-selection-list Angular2 中设置检查元素的最大限制

【英文标题】：How to set maximum limit of checked elements in MD-selection-list Angular2

【发布时间】：2018-03-27 21:12:30

【问题描述】：

我有 md-selection-list 与 *ngFor 的一些标签，例如 [sport,relax,..]

标签存放在this.tags，选中的标签存放在this.tab

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

我从这段代码开始，但它不起作用。我尝试在列表项上禁用此“检查”图标，然后在用户存储

这是代码：

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);

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

感谢您的帮助

【参考方案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 事件，将在下一个版本中引入。我认为，点击处理程序是您现在可以做的最好的事情。

【讨论】：

哇，太好了 :) 但是，我怎样才能实现一些项目达到限制的警报？那么如何告诉打字稿这个禁用案例被触发了

用另一个例子更新

:D 很不错，很简单，我不知道用这种方法解决这个问题。非常感谢！