Angular 向表中的每一行添加删除符号_Angular

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

angular

Angular 向表中的每一行添加删除符号,angular,Angular,我想实现Edit按钮，它将在表中的每一行显示Action列和delete图标。一旦用户单击编辑按钮，如何在操作列中将“删除”符号添加到表中的每一列？我在表中添加了一个示例我是个新手。我已经添加了一些代码 <div class="button"> <button mat-button><i class="fa fa-edit"></i> Edit </button> </div> <div class="tab

我想实现

Edit

按钮，它将在表中的每一行显示

Action

列和delete图标。一旦用户单击

编辑按钮

，如何在操作列中将“删除”符号添加到表中的每一列？我在表中添加了一个示例

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

<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>

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

<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>


#
{{i+1}}
主题代码
{{element.Subject_Code}
主题名称
{{element.Subject_Name}
主题名称
编辑
删除

注意：如果要将数据发送到任何API，请删除所有行的

edit

属性。

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

<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>


#
{{i+1}}
主题代码
{{element.Subject_Code}
主题名称
{{element.Subject_Name}
主题名称
编辑
删除

注意：如果要将数据发送到任何API，请删除所有行的

edit

属性。

在这种情况下，您需要迭代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>


名字
姓
电子邮件
Cnic
性别
行动
{{student.firstName}
{{student.lastName}
{{student.email}
{{student.cnic}
{{学生性别}
编辑
去除

在您的情况下，您需要迭代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>


名字
姓
电子邮件
Cnic
性别
行动
{{student.firstName}
{{student.lastName}
{{student.email}
{{student.cnic}
{{学生性别}
编辑
去除

那么，我假设您希望能够显示数据库中的数据列表？如果我错了，请纠正我。如果事实果真如此，阿里先生是对的。您需要使用一个

*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>
`

`
看法
昵称
平衡
类型
奖励
编辑
单击以查看

{{account.昵称}
{{account.balance}}
{{account.type}{{account.rewards}}编辑
`

您可以在这里看到，我们已经两次完成了您尝试使用删除按钮所做的操作

我们首先定义表头，它将用作列名。其中两个列名是“查看”和“编辑”。然后，我们使用

*ngFor

使用

的“let account of accounts”

迭代属于客户的每个帐户。如果您熟悉Java，特别是

foreach

loops，您应该了解这是做什么的

最后，使用

标记，我们输入信息——如果有的话——这些信息需要按照与我们指出的列名相同的顺序显示。在视图的

中，我们显示了一个导航到适当路线的按钮对象，我们看到在“编辑”的

中再次出现这种情况

我希望这对你有帮助。刚开始的时候我讨厌Angular，现在我正在指导我的班级完成每一个项目