如何设置MD-选择列表选中的元素的最大限量Angular2

Question

我已经MD-选择列表有一些标签的*ngFor，例如[sport,relax,..]

的标签存储在this.tags，所选标签存储在this.tab

我想阻止用户选择超过5个标签。所以如果用户选择第五项，应该有一些提醒，并且只有当未选中一些检查项时，用户才可以键入不同的标签。

我从这段代码开始，但它不起作用。我尝试在列表项上禁用此“检查”图标，然后不将该项添加到this.tab，直到用户存储了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); 
} 
} 

你觉得这个怎么样？如何解决这个问题呢？也许有其他解决方案，更容易？是为了这个问题？

感谢所有帮助

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事件，该事件将在下一个版本中引入。点击处理程序是你现在可以做的最好的，我想。