Angular 通过单击“角度2”上的另一个按钮更改模板的手动创建元素

获得下一个模板：

<table class="table table-sm" style="background-color: lightgrey;">
  <tbody>
  <tr *ngFor="let category of categories">
    <td class="central">
      <p>{{category.categoryName}}</p>
      <!--<input class="form-control" value="{{category.categoryName}}">-->
    </td>

    <td><button type="button" class="btn btn-outline-warning">Edit</button></td>
    <td><button type="button" class="btn btn-outline-danger">Delete</button></td>
    <!--<td><button type="button" class="btn btn-outline-warning">Done</button></td>-->
    <!--<td><button type="button" class="btn btn-outline-danger">Cancel</button></td>-->
  </tr>
  </tbody>
</table>    

以下是组件文件的一部分：

import {Component, OnInit} from '@angular/core';
import {Category} from "./models/category";
import {CategoryService} from "./category.service";

@Component({
 selector: 'my-categories',
 templateUrl: './categories.component.html',
})
export class CategoriesComponent implements OnInit{

categories: Category[];

constructor (private categoryService: CategoryService) {}

ngOnInit() {
   this.getCategories();
}
...

因此，决定如下： 首先，我将布尔属性“可见性”添加到类别类：

export class Category {
  constructor(
    public categoryId: number,
    public categoryName: string,
    public visibility: boolean = true
  ){}
}

然后，我将[hidden]属性添加到模板的所有DOM元素中，我需要根据编辑取消按钮单击隐藏/显示这些元素。此属性的值最初设置为初始显示的元素和特定类别的可见性属性（true）的值！初始隐藏元素的可见性（为false）。由于编辑取消按钮的单击事件，我将可见性更改为反向值：

<table class="table table-sm" style="background-color: lightgrey;">
  <tbody>
  <tr *ngFor="let category of categories">
    <td class="central">
      <p [hidden]="category.visibility">{{category.categoryName}}</p>
      <input [hidden]="!category.visibility" class="form-control" value="{{category.categoryName}}">
    </td>

    <td><button [hidden]="category.visibility" type="button" class="btn btn-outline-warning" (click)="category.visibility = !category.visibility">Edit</button></td>
    <td><button [hidden]="category.visibility" type="button" class="btn btn-outline-danger">Delete</button></td>
    <td><button [hidden]="!category.visibility" type="button" class="btn btn-outline-warning">Done</button></td>
    <td><button [hidden]="!category.visibility" type="button" class="btn btn-outline-danger" (click)="category.visibility = !category.visibility">Cancel</button></td>
  </tr>
  </tbody>
</table>

{{category.categoryName}

编辑
删去
多恩
取消

请向我们展示您的尝试。我考虑过将所有元素添加到DOM中，其中一些元素使用ng样式隐藏。但是我不知道如何才能打开按钮单击某些元素并更改样式以显示它们，然后获取一些元素以隐藏它们/开始时很简单-使用静态数据使其在一行中工作Aluan Haddad，你知道，我发现了许多用于一行实现的示例，但是在我的例子中，它们不起作用，因为不需要做一些特定的ID或变量，这些ID或变量只包含一行的hide-show状态。我仍然没有看到任何您尝试过的例子。请更新您的问题。

<table class="table table-sm" style="background-color: lightgrey;">
  <tbody>
  <tr *ngFor="let category of categories">
    <td class="central">
      <p [hidden]="category.visibility">{{category.categoryName}}</p>
      <input [hidden]="!category.visibility" class="form-control" value="{{category.categoryName}}">
    </td>

    <td><button [hidden]="category.visibility" type="button" class="btn btn-outline-warning" (click)="category.visibility = !category.visibility">Edit</button></td>
    <td><button [hidden]="category.visibility" type="button" class="btn btn-outline-danger">Delete</button></td>
    <td><button [hidden]="!category.visibility" type="button" class="btn btn-outline-warning">Done</button></td>
    <td><button [hidden]="!category.visibility" type="button" class="btn btn-outline-danger" (click)="category.visibility = !category.visibility">Cancel</button></td>
  </tr>
  </tbody>
</table>