Angular如何删除mat表中的一行？

Question

我不能在我的角垫表中使用*ngFor，或者我只是没有这方面的知识。如果有人可以帮助我，我将不胜感激？

我想删除数组中的一行，例如使用一个按钮，然后将其列在我的表上，但它不起作用。因此我想使用*ngFor 来显示表格数据，但是如果我点击ADD 按钮，它会添加另一行，里面没有数据。

这是我目前得到的：

angular-table.component.html

<table mat-table *ngFor="let item of data" class="mat-elevation-z8" matSort>

    <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef>Title</th>
        <td mat-cell *matCellDef> {{item.title}} </td>
    </ng-container>

    <ng-container matColumnDef="id" id="id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef> {{item.id}}</td>
    </ng-container>

    <ng-container matColumnDef="delete">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Test</th>
        <td mat-cell *matCellDef> 
            <mat-icon (click)="removeCart(i)" class="removeCart">close</mat-icon>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<button (click)="ADD1()">Add1</button>
<button (click)="ADD2()">Add2</button>

angular-table.component.ts

export class AngularTableComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  amount: number;
  data: any = [];
  id: number = 2;
  title: string = 'test';

  displayedColumns: string[] = ['title', 'id', 'delete'];


  ADD1(){
    const id = this.id;
    const title = this.title;

    const newData = {
      id,
      title
    }
    this.data.push(newData);
    console.log(this.data);
   }


  ADD2(){
    const id = this.id = 7;
    const title = this.title = "Hello";

    const newData = {
      id,
      title
    }
    this.data.push(newData);
    console.log(this.data);
   }


  removeCart(index: number){
    this.data.splice(index, 1);
  }
}

我做了一个 StackBlitz，但遗憾的是它不起作用我无法让它工作来导入模块，我尝试了很长时间。 https://stackblitz.com/edit/add-angular-material-o2pu6c?file=src%2Fmain.ts

谢谢！

Answer 1

首先，<table mat-table *ngFor="let item of data"，它将一直重复带有标题的表格。它不会显示数据。

所以，你最好使用MatTableDataSource。

dataSource: MatTableDataSource<any> = new MatTableDataSource<any>([]);

然后，您可以将您的数据分配给dataSource 的data。

this.dataSource.data = this.data;

现在，您的表格将是这样的：

<table mat-table class="mat-elevation-z8" [dataSource]="dataSource" matSort>

而且，您的列定义将如下所示：

<ng-container matColumnDef="title">
     <th mat-header-cell *matHeaderCellDef>Title</th>
     <td mat-cell *matCellDef> {{item.title}} </td>
</ng-container>

既然，要删除一行，就需要一个按钮和行的索引来删除行。

<ng-container matColumnDef="delete">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Test</th>
    <td mat-cell *matCellDef="let i = index"> 
        <button mat-icon-button class="removeCart" (click)="removeCart(i)" >
           <mat-icon>close</mat-icon>
        </button>
    </td>
</ng-container>

工作演示StackBlitz。

Answer 2

在您的“angular-table.component.html”中，您连续添加一个按钮并获取 id；

<table mat-table *ngFor="let item of data" class="mat-elevation-z8" matSort>

    <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef>Title</th>
        <td mat-cell *matCellDef> {{item.title}} </td>
    </ng-container>

    <ng-container matColumnDef="id" id="id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef> {{item.id}}</td>
    </ng-container>

    <ng-container matColumnDef="delete">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Test</th>
        <td mat-cell *matCellDef> 
            <mat-icon (click)="removeCart(i)" class="removeCart">close</mat-icon>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

                <div class="example-element-description">
                  <button
                    mat-raised-button
                    color="warn"
                    (click)="handelDelete(item.id)"
                  >
                    Delete
                  </button>
                </div>
</table>

<button (click)="ADD1()">Add1</button>
<button (click)="ADD2()">Add2</button>

在你的 angular-table.component.ts 中，添加移除元素表单 data[] 并刷新表格数据的方法。

export class AngularTableComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  // remove :void type
  // refrech the data with OnInit
 this.data = this.data
  }

  amount: number;
  data: any = [];
  id: number = 2;
  title: string = 'test';

  displayedColumns: string[] = ['title', 'id', 'delete'];

constructor() { }


  ADD1(){
    const id = this.id;
    const title = this.title;

    const newData = {
      id,
      title
    }
    this.data.push(newData);
    console.log(this.data);
   }


  ADD2(){
    const id = this.id = 7;
    const title = this.title = "Hello";

    const newData = {
      id,
      title
    }
    this.data.push(newData);
    console.log(this.data);
   }

handelDelete(pId) {
// to delete the element by id
this.data = this.data.filter(element => element == pId);
  }


  removeCart(index: number){
    this.data.splice(index, 1);
  }
}