angular4材質表

Question

 @Component({ selector: "app-dynamic-table", template: ` ` }) export class DynamicTableComponent { private _columns = [ { name: "date", show: true }, { name: "selected", show: true }, { name: "id", show: true }, { name: "location3", show: false }, { name: "location4", show: false }, { name: "location5", show: false } ]; get columns() { return this._columns; } get displayedColumns(): string[] { return this._columns.map(c => c.name); } } 

上面的代碼可以成功隱藏和顯示物料表列，但是我需要限制用戶選擇表的少於3列，並且應該顯示警報消息。任何人都可以看到嗎？

Answer 1

您可以將click event保留在您的checkbox ，並檢查該事件上checkbox選擇的限制，並決定是否繼續該事件。 如果您prevent該事件的發生，那么最終它不會觸發checkbox change事件

碼

checkLimit(event) {
    // To make this SSR proof code, you could consider using Renderer to query DOM
    let dom = event.currentTarget.querySelector('.mat-checkbox-input');
    console.dir('Dom', dom, event.currentTarget)
    if (!dom.checked && this.columns.filter(col => col.show).length >= 3) {
      event.stopPropagation()
      event.preventDefault()
      alert('Cant select more than three column')
      return
    }
}

HTML

<mat-checkbox *ngFor="let column of columns" 
  (click)="checkLimit($event)"
  [(ngModel)]="column.show">
    {{column.name | titlecase}}
</mat-checkbox>

Answer 2

非常感謝Pankaj回答。 但這不是一個有角度的方法。 在組件中訪問DOM並在沒有renderer2的情況下進行檢查。 這是實現相同解決方案的角度方法。

零件：

validate(index, column, event){
    column.show = !column.show;
    const matches = this.columns.filter(item=> item.show);
    if(matches.length >= 3){
      alert('not allowed');
      event.stopPropagation();
      event.preventDefault();
      column.show = false;
    }
  }

范本：

<div *ngFor="let column of columns; let i=index;">
  <input type="checkbox" id="{{i}}" name="feature{{i}}"
    value="{{column.name}}"   [checked]="column.show" ([ngModel])="column.show" (click)="validate(i, column, $event)">
    <label for="feature{{i}}">{{column.name}}</label></div>

https://stackblitz.com/edit/angular-q2wrc4