Блог

Здравствуйте, я работаю над Angular проектом и у меня есть список элементов, которые можно проверить.

Моя бизнес-логика заключается в том, что:

 stateChange(event: any, illRecipe: Attendance){

    var state: State = {
        is_checked: event.checked,
        attandance: illRecipe
    };

    this.checkboxValues.push(state);

    console.log(this.checkboxValues);

   
}
 

каждый раз, когда флажок установлен, эта функция срабатывает и помещает значение в массив.
Мой вопрос: Как я могу обновить объекты в массиве? или есть способ улучшить решение для обновления этого объекта ? Я знаю, что state обновления, но в массиве я получаю новый элемент.

console.log(это.значения флажков)

Обновить

Сейчас я пытаюсь это сделать:

 stateChange(event: any, illRecipe: Attendance){

    var state: State = {
        is_checked: event.checked,
        attandance: illRecipe
    };

    console.log(state);

        this.checkboxValues.push(state);
        //push the object into array

        var isSameId = this.checkboxValues.filter( value => value.attandance.id == state.attandance.id)
        // filter to find checkboxes that are clicked multiple times

        if(isSameId.length >= 2){
            this.checkboxValues.forEach((checkBoxValue, checkboxIndex) =>{
                isSameId.forEach((sameValue, sameIndex) =>{
                    if(sameValue.attandance.id == checkBoxValue.attandance.id amp;amp; isSameId.length > 1){
                        this.checkboxValues.splice(checkboxIndex, 1)
                    }
                })
            })
        }
        //trying to sort out the older entries with the same id
   
    console.log("checkboxValues",this.checkboxValues);
}
 

моя цель состоит в том, чтобы избавиться от дубликатов в checkboxValues массиве. Я подхожу довольно близко, но кое — где есть небольшая заминка. Если я нажму один флажок три раза, затем другой, а затем уже нажатый снова, он переключит в массиве непроверенный объект, и тот, который нажат, исчезнет.

внешний интерфейс:

  <div *ngFor="let ill of illAttendances">
                <div *ngIf="!ill.is_file_uploaded" class="box">
                    <div class="p-grid">
                        <div class="p-col-1">
                            <p-checkbox (onChange)="stateChange($event, ill)"></p-checkbox>
                        </div>
                        <div class="p-col">
                            <div *ngIf="ill.start != undefined amp;amp; ill.end != undefined">
                                {{ ill.absence_type | titlecase }} von <b>{{ ill.start | date:'d MMMM y' }}</b> bis
                                <b>{{ ill.end | date:'d MMMM y' }}</b>
                            </div>

                            <div *ngIf="ill.one_day != null">
                                {{ ill.absence_type | titlecase }} am <b>{{ ill.one_day | date:'d MMMM y' }}</b>
                            </div>
                        </div>
                    </div>

                </div>
                <br>
            </div>
 

Трудно сказать, не говоря, что вы html, но я думаю, что вы можете использовать массив State (ваш объект состояния позволяет его называть stateList ) и привязать флажок к элементу этого массива. Таким образом, вы stateList сохраните проверенное состояние связанного Attendance , и вам не нужно будет вести отдельный список или обрабатывать stateChange событие.

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

если вы можете воспроизвести приведенный ниже подход, используя свой собственный тип данных (и структуру) Я думаю, что это лучше, так как у вас есть 2 разных списка для одной работы.

в вашем файле comp.ts инициализируйте массив с помощью Attendance

 export class AppComponent {
  stateList = [];

  ngOnInit() {
    // use your own attandence e.g. attandence: yourAttandenceObj
    this.stateList.push({ is_checked: false, attandence: { name: 'Att1' /*and other data*/ } });
    this.stateList.push({ is_checked: false, attandence: { name: 'Att2' } });
    this.stateList.push({ is_checked: false, attandence: { name: 'Att3' } });
  }
}
 

и в вашем html

   <div *ngFor="let state of stateList">
    <label>
      <input type="checkbox" [(ngModel)]="state.is_checked"/>
      {{state.attandence.name}}
    </label>
  </div>
 

при таком подходе StateList сохранит все проверенные элементы без проблем.

Вы можете найти рабочий пример здесь