Question

我有一个包含行和复选框的表。标题中的一个主要复选框以及每行的多个复选框。现在正在查找将使用删除按钮从表中删除行数的函数。挑战是它应该删除所有行，如果我选择桌面复选框选择所有行，它应该能够删除单行，如果我点击单行。我已经给出了我的应用程序中使用的代码和plunkr示例，以便更好地了解行选择。

https://plnkr.co/edit/7l4AltdWfLGdLaXgF4vl?p=info

@Component({
      select
or: 'my-app',
      template: `
        <div>
          <h2>Hello Angular2</h2>
          <table class="table table-bordered table-condensed table-striped table-hover">
            <thead>
                <tr>
                    <th></th>
                    <th>Size</th>
                    <th>Diameter</th>
                    <th class="text-center">
                        <input type="checkbox" name="all" [checked]="isAllChecked()" (change)="checkAll($event)"/>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let size of sizes ; let i = index">
                    <td class="text-right">{{i + 1}}</td>
                    <td class="text-right">{{size.size}}</td>
                    <td>{{size.diameter}}</td>
                    <td class="text-center">
                        <input type="checkbox" name="sizecb[]" value="{{size.id}}" [(ngModel)]="size.state"/>
                    </td>
                </tr>
            </tbody>
          </table>
        </div>
      `,
    })
    export class App {
      sizes: any[] = [
        { 'size': '0', 'diameter': '16000 km' },
        { 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' },
{ 'size': '1', 'diameter': '32000 km' }
      ];

      checkAll(ev) {
        this.sizes.forEach(x => x.state = ev.target.checked)
      }

      isAllChecked() {
        return this.sizes.every(_ => _.state);
      }
    }

    @NgModule({
      imports: [ BrowserModule, FormsModule ],
      declarations: [ App ],
      bootstrap: [ App ]
    })
    export class AppModule {}

Answer 1

您可以查看https://plnkr.co/edit/SiKo9H4RCn1ebqTosGZt?p=info

check(size) {
    size.state = !size.state;
}
  
delete() {
    this.sizes.forEach(x => {
      if(x.state) { alert(x.size); }
    });
}

<td class="text-center">
  <input type="checkbox" name="sizecb[]" value="{{size.id}}"
  [(ngModel)]="size.state" (click)="check(size)"/>
</td>
...
<button (click)="delete()">Delete</button>
...

Angular 4 - 删除函数以删除在typescript

1 个答案: