Angular 4 - 删除功能以删除打字稿中选择的行数答案

【问题标题】：Angular 4 - delete function to delete number of rows selected in typescriptAngular 4 - 删除功能以删除打字稿中选择的行数
【发布时间】：2018-03-17 02:01:17
【问题描述】：

我有一个带有行和复选框的表格。标题中的一个主要复选框以及每一行的多个复选框。现在寻找将使用删除按钮从表中删除行数的函数。挑战是，如果我选择选择所有行的桌面复选框，它应该删除所有行，如果我单击单行，它也应该能够删除单行。我已经给出了代码和 plunkr 示例以及在我的应用程序中使用的代码和 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 {}

【问题讨论】：

您是否尝试过创建解决方案？

标签： javascript angular typescript

【解决方案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>
...

【讨论】：