Question

在我的应用程序中，我正在寻找一个函数来删除从我的数组中选择的复选框的数量。我写了，我可以console.log我选择的复选框的数量。但我坚持如何获取所选复选框的索引号并仅删除它们。在删除函数中，我必须从主数组中删除那些行数。

html -

     <ng-container *ngFor="let reasoncode of displayReasonCodes$ | async;let i = index">
    <tr class= "row-break">
    <checkbox type="checkbox"  name="sizecb[]" value="{{reasoncode.id}}"  [(ngModel)]="reasoncode.state">
      </checkbox>
      <td>  
      <form>
    <form-group>
    <textbox [readOnly]="isEditable" ngModel="{{reasoncode.ReasonCode}}"  name="textbox" ></textbox>
    </form-group>
    </form>
    </td>
    <td>
    <form>
     <form-group>
    <textbox  [readOnly]="isEditable" ngModel="{{reasoncode.Description}}" name="textbox1" ></atextbox>
    </form-group>
    </form>
    </td>
    <form>
    <p>
    <toggle-switch   ngModel="{{reasoncode.Status}}"   name="switch1"  ></toggle-switch>
    </p>
    </form>
    </tr>
    </ng-container>
    </tbody>
    </table>

COMPONENT.TS

export class ReasonCodesComponent implements OnInit {


    checkAll(event: any) {
      if (!this.result) return;
      this.result.forEach((x: any) => x.state = event.target.checked)
      }

     isAllChecked() {
      if (this.arr) return;
      return this.result.every((_: any) => _.state);
      }
     check(result: any) {
     result.state == false;
      result.state! = result.state;
      }
    @select(store.displayReasonCodes) displayReasonCodes$: Observable<IReasonCodes>;

      arr: any[];
      state: any;
      $event: any;
      displayReasonCodes: any;
      x: any;
      _: any;
      result: any;
      isEditable: boolean;

     constructor(private reasonCodesActions: ReasonCodesActions) {
      }

      reasoncodeObject:Object;
      ngOnInit() {

    this.displayReasonCodes$.subscribe(data => this.result = data ) 
      }

    deleterow() { 
        this.result.forEach((x: any) => {
          if (x.state) {  alert(x.state)  /// here i am getting true as alert for number of rows selected and when i clcik on delete.

            let copyObj = this.displayReasonCodes$.subscribe(data1=>this.data=(JSON.parse(JSON.stringify(data1))));

            console.log(this.data)  ; //data contains the array of objects, from which i have to splice up the number of selected rows from table.

          };
        })
      }

    }

我正在寻找删除复选框中选中的行，并显示剩下的行。

Answer 1

当您使用'any'而不是'boolean'定义字段状态时，请尝试此操作。只需省略那些已检查的对象，返回未选中的对象：

<template>
  <div>
    <div id="page-wrapper">
      <div class="row">
        <div class="col-lg-12">
          <div class="form">
            <div class="form-group">
              <label for="name">Line name</label>
              <input v-model="line.name" class="form-control" type="text" id="name" name="name"/>
            </div>
            <label for="">Buttons</label>

            <div class="" v-for="(button, index ) in line.buttons">

              <div class="form-group">
                <label for="btn">Przycisk nr {{ index }}</label>
                <input v-model="button.name" class="form-control col-lg-3" type="text" id="btn" name="btn" />

                <input type="radio" id="'one' + index" :value="false" v-model="button.is_reported">
                <label for="one">No</label>
                <input type="radio" id="'two' + index" :value="true" v-model="button.is_reported">
                <label for="two">Yes</label>
              </div>

              <div class="form-group">
                <div class="" v-for="(agroup, index2) in assignmentGroupsList">

                    <input type="checkbox" :name="'agroup'+index2"  :value=" agroup.name " v-model="button.assignmentGroups">
                    <label for="">{{ agroup.name }}</label>
                  </div>
              </div>

              <button class="btn btn-danger"
                      @click="deleteButton(index)">
                Remove
              </button>
            </div>

            <div class="form-group">
              <button class="btn btn-success"
                      @click="addButton">
                Add
              </button>
              <button class="btn btn-primary"
                      @click="saveLine">
                Save
              </button>
            </div>
          </div>
          <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
      </div>
    </div>
  </div>
</template>

在您的deleterow（） - 方法中放置此代码而不是forEach（） - 循环。

Answer 2

好的，现在我明白了。将您的代码作为源代码在Plunkr上执行以下操作，只是为了向您展示它是如何工作的：

在您的模板中，我更改了

<input type="checkbox" name="sizecb[]" value="{{size.id}}" [(ngModel)]="size.state" />

到

<input type="checkbox" name="sizecb[]" (change)="checkOccurred()" value="{{size.id}}" [(ngModel)]="size.state" />

接下来，我扩展了你的尺寸对象，以扩大可能的输出范围：

sizes: any[] = [
    { 'size': '0', 'diameter': '16000 km', 'state': false },
    { 'size': '1', 'diameter': '32000 km', 'state': false },
    { 'size': '23', 'diameter': '3000 km', 'state': false },
    { 'size': '22', 'diameter': '700 km', 'state': false },
    { 'size': '99', 'diameter': '377000 km', 'state': false }
];

请注意，我应用了缺失的字段'state'，这使得之后的每个操作都变得更加容易。

然后我添加了以下两种方法

private checkOccurred(): void {
    this.getSelectedCheckboxes();
}

private getSelectedCheckboxes(): any[] {
    const result: number[] = [];

    this.sizes.forEach((item, index) => {

        if (item.state === true) {
            result.push(index);
        }
    });

    console.log(result);

    return result;
}

你在这里看到的是考虑到getSelectedCheckboxes（）正是你想要的。一种方法，用于提供阵列状态中所选复选框的索引列表。

希望这有帮助。

Angular 4 / Typescript - 删除所选行数

2 个答案: