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

Question

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

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

这是我到目前为止得到的：

角表.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>

角表.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

谢谢！

标签： angulartypescriptangular-materialmat-table

Answer 1

在您的“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);
  }
}