таблица угловых материалов

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

Действительно ценю Панкадж Ответ.Но это не угловой путь.Доступ к 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

Answer 2

Вы можете сохранить событие click на своем checkbox, проверить лимит выбора checkbox для этого события и решить, следует ли продолжить это событие или нет.Если вы prevent это событие произойдет, то в конечном итоге оно не будет запускать change событие checkbox

Код

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>