снимите флажок, который проверяется и замораживается с условием в Angular 5

Question

У меня есть таблица, которая перебирает значения JSON, у меня есть флажок в первом столбце

требование: когда выбраны 5 флажков, пользователь не должен иметь возможность выбрать шестой флажок, но он можетотмените выбор любого из 5 флажков

текущий сценарий: я могу заблокировать флажки, когда пользователь выбирает 5 флажков, но он не позволяет мне снять флажок

<checkbox [forbidden]="isFull() && !Selected" [ngModel]="Selected" (ngModelChange)="Change(Result, $event)"></checkbox>

пользовательский компонент в моей кодовой базе

isFull() {
    return someService.Slots()===0; // availableSlots returns 5
}

Change(Result, $event){
    // some code irrelevant to the checkbox logic
    // Result holds the JSON value for iterating row
}

Пожалуйста, предоставьте работающий планер или любой онлайн-редактор для лучшего понимания

Заранее спасибо

Answer 1

Надеюсь, это поможет вам !, Вы можете оптимизировать это и изменить его в соответствии с вашими потребностями.

Рабочий образец plunker

Файл шаблона:

<code> template: `
          <ul>
            <ng-container>
                <li *ngFor="let item of list">
                <input 
                    type="checkbox" 
                    value="{{item.value}}"
                    [disabled]="item.disabled"
                     (change)="onCheckboxChange($event, item)"
                    /> 
                    {{item.label}}<br>
                </li>
            </ng-container>
          </ul>
         <pre> {{checkedList | json}} 

`

Файл класса

 export class App {
        name: string;
        checkedList: any = [];
        list: any = [
            {'label': 'A', 'value': 'a', 'disabled': false},
            {'label': 'B', 'value': 'b', 'disabled': false},
            {'label': 'C', 'value': 'c', 'disabled': false},
            {'label': 'D', 'value': 'd', 'disabled': false},
            {'label': 'E', 'value': 'e', 'disabled': false},
            {'label': 'F', 'value': 'f', 'disabled': false},
            {'label': 'G', 'value': 'g', 'disabled': false}
        ];
        constructor() {

        }

        onCheckboxChange(e, item) {

            if(e.target.checked) {
                this.checkedList.push(item);
            } else {
                let index = this.checkedList.findIndex(obj => item.value === obj.value);
                if(index > -1) {
                    this.checkedList.splice(index,1);
                }
            }

            if(this.checkedList.length > 4) {  // *change available slots*
                let unCheckedList = this.list.filter((obj) => {
                   let isCheck = this.checkedList.find((item) => {
                        return item.value === obj.value
                    }); 
                    obj.disabled = !isCheck ? true : false;
                    return !isCheck;
                });
            } else {
               this.list.map((obj)=>{
                   obj.disabled = false;
               });
            }
        }
    }

Answer 2

ОБНОВЛЕНИЕ

Попробуйте это:

import { Component } from "@angular/core";
import { list } from './list';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  list: Array<any>;
  checked = [];
  shouldCheckboxesBeDisabled = false;

  ngOnInit() {
    this.list = list;
    this.recheckDisablingStatus();
  }

  recheckDisablingStatus() {
    this.shouldCheckboxesBeDisabled = this.list.filter(item => item.checked).length >= 5;
  }

  uncheckIfAlreadyChecked(itemIndex) {
    const isChecked = this.list[itemIndex].checked;
    this.list[itemIndex].checked = isChecked ? false : isChecked;
    this.recheckDisablingStatus();
  }
}

И в шаблоне:

<table border="1">
  <thead>
    <td>ID</td>
    <td>Name</td>
    <td>Checked</td>
    <td>Uncheck if Already Checked</td>
  </thead>
  <tbody>
    <tr *ngFor="let item of list; let i = index">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>
        <input 
          [disabled]="shouldCheckboxesBeDisabled && !list[i].checked"
          type="checkbox" 
          [(ngModel)]="list[i].checked"
          (change)="recheckDisablingStatus()">
      </td>
      <td><button (click)="uncheckIfAlreadyChecked(i)">Uncheck If Checked</button></td>
    </tr>
  </tbody>
</table>

---

Вот это Рабочий образец StackBlitz для вашей ссылки.

ОРИГИНАЛЬНЫЙ ОТВЕТ

Дайте эту попытку:

<table border="1">
  <thead>
    <td>ID</td>
    <td>Name</td>
    <td>Checked</td>
  </thead>
  <tbody>
    <tr *ngFor="let item of list$ | async; let i = index">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>
        <input 
          [disabled]="shouldCheckboxesBeDisabled && checked.indexOf(item.id) < 0"
          type="checkbox" 
          (change)="onCheckBoxChange(item.id, $event.target.checked)">
      </td>
    </tr>
  </tbody>
</table>

И в вашем компоненте:

import { Component } from "@angular/core";
import { Observable, of } from "rxjs";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  list$: Observable<Array<any>>;
  checked = [];
  shouldCheckboxesBeDisabled = false;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // this.list$ = this.http.get<Array<any>>('/assets/data.json');
    this.list$ = of([
      {
        id: 1,
        name: "Name 1",
        checked: false
      },
      {
        id: 2,
        name: "Name 2",
        checked: true
      },
      {
        id: 3,
        name: "Name 3",
        checked: false
      },
      {
        id: 4,
        name: "Name 4",
        checked: true
      },
      {
        id: 5,
        name: "Name 5",
        checked: false
      },
      {
        id: 6,
        name: "Name 6",
        checked: true
      },
      {
        id: 7,
        name: "Name 7",
        checked: false
      },
      {
        id: 8,
        name: "Name 8",
        checked: true
      },
      {
        id: 9,
        name: "Name 9",
        checked: false
      },
      {
        id: 10,
        name: "Name 10",
        checked: true
      }
    ]);
  }

  onCheckBoxChange(itemId, checked) {
    if(checked) {
      this.checked.push(itemId);
    } else {
      const itemIndexToRemove = this.checked.indexOf(itemId);
      this.checked.splice(itemIndexToRemove, 1);
    }
    this.shouldCheckboxesBeDisabled = this.checked.length >= 5;
  }
}

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.

Answer 3

не должно быть "isFull () &&! Selected"? потому что вы хотите заморозить невыбранные, но все еще можете отменить выбор.