Question

我想实现一个Edit按钮，该按钮将在表的每一行中显示带有删除图标的Action列。用户单击Edit button后，如何在“操作”列中的表的每一列中添加“删除”符号？我在表中添加了一个示例。

我是Angular的新手。我已经添加了一些代码。

<div class="button">
  <button mat-button><i class="fa fa-edit"></i> Edit </button>
</div>


<div class="table-container">
  <table mat-table [dataSource]="subjectData">
    <ng-container matColumnDef="Subject Number">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
      <td mat-cell *matCellDef="let i = index">{{ i + 1 }}</td>
    </ng-container>
    <ng-container matColumnDef="Subject_Code">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Subject Code</th>
      <td mat-cell *matCellDef="let element">{{ element.Subject_Code }}</td>
    </ng-container>
    <ng-container matColumnDef="Subject Name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Subject Name</th>
      <td mat-cell *matCellDef="let element">{{ element.Subject_Name }}</td>
    </ng-container>
  </table>
</div>

TS：

  export class SubjectListComponent implements OnInit{

        displayedColumns: string[] = ['Number', 'Subject_Code',                            
                                      'Subject_Name'];
  }

Answer 1

您可以简单地添加一个变量来跟踪是否单击了编辑按钮。

<div class="table-container">
  <table mat-table [dataSource]="subjectData">
    <ng-container matColumnDef="Subject Number">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
      <td mat-cell *matCellDef="let i = index">{{ i + 1 }}</td>
    </ng-container>
    <ng-container matColumnDef="Subject_Code">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Subject Code</th>
      <td mat-cell *matCellDef="let element">{{ element.Subject_Code }}</td>
    </ng-container>
    <ng-container matColumnDef="Subject Name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Subject Name</th>
      <td mat-cell *matCellDef="let element">{{ element.Subject_Name }}</td>
    </ng-container>
    <ng-container matColumnDef="Actions">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Subject Name</th>
      <td mat-cell *matCellDef="let element">
        <div class="button">
          <button mat-button><i class="fa fa-edit" (click)="element.edit = true"></i> Edit </button>
          <button mat-button><i class="fa fa-delete" *ngIf="element.edit"></i> Delete </button>
        </div>
      </td>
    </ng-container>
  </table>
</div>

注意：如果要将数据发送到任何API，请为所有行删除此edit属性。

Answer 2

在您的情况下，您需要遍历subjectData

查看此代码段

<table class="table">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Cnic</th>
                <th>Gender</th>
                <th style="text-align:center">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr class="click" *ngFor="let student of students">
                <td>{{student.firstName}}</td>
                <td>{{student.lastName}}</td>
                <td>{{student.email}}</td>
                <td>{{student.cnic}}</td>
                <td>{{student.gender}}</td>
                <td>
                    <button class="btn btn-primary" [routerLink]="[student._id]"><span
                            class="glyphicon glyphicon-pencil"></span>&nbsp; Edit</button>
                    <button class="btn btn-danger" (click)="onRemoveClick(student._id)"><span
                            class="glyphicon glyphicon-trash"></span>&nbsp; Remove</button>
                </td>
            </tr>
        </tbody>
    </table>

Answer 3

因此，我假设您希望能够显示数据库中的数据列表？如果我错了纠正我。如果确实如此，那么阿里先生是对的。您将需要使用一个*ngFor循环来循环访问组件ts文件中定义的数组。实际上，在构建在线银行应用程序时，我们只是在课堂上使用了该项目。我将在这里向您展示我的代码示例：

`<div class="card-body">
<table class="table table-bordered table-striped" >
    <thead class="thead-dark">
      <th>View</th>
      <th>Nickname</th>
      <th>Balance</th>
      <th>Type</th>
      <th>Rewards</th>
      <th>Edit</th>
    </thead>
    <tr *ngFor = "let account of accounts">
   <td ><button [routerLink] = "['/accounts', account.account_id]"> Click to View </button><br> </td>

  <td>{{ account.nickname}}</td>

    <td style="font-size: 12px">{{ account.balance }}</td>


    <td> {{ account.type }}</td>    <td> {{account.rewards }}</td>    <td><button [routerLink] = "[account.account_id, '/update-account']">Edit</button></td>    </tr>    </table>
`

您可以在此处看到我们已经完成了您使用删除按钮所做的两次操作。

我们首先定义表标题，它将用作我们的列名。这些列名称中的两个是“查看”和“编辑”。然后，我们使用*ngFor对"let account of accounts"属于客户的每个帐户进行迭代。如果您熟悉Java，特别是foreach循环，则应该了解它的作用。

最后，使用<td>标签，我们输入的信息（如果有的话）需要以与指示列名相同的顺序显示。在View的<td>中，我们显示一个导航到适当路径的按钮对象，并且对于{Edit}，我们会再次使用<td>看到这种情况。

希望这对您有所帮助。刚开始时，我讨厌Angular，现在我要通过每个项目来指导我的班级！

在表的每一行中添加删除符号

3 个答案: