Question

您好，我正在处理一个 Angular 项目，并且有一个可以检查的 list of elements。

我的业务逻辑是：

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(this.checkboxValues)

更新

我现在正在尝试：

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 && 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 && 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>

Answer 1

不说 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 将保持所有选中的项目没有问题。

您可以在 here

中找到工作示例

如果单击复选框，则更改布尔值

1 个答案: