更改单击角2

-3

得到了一个模板：更改单击角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>

带*号ngFor指令我dinamically创建在第一列的表，其中有一些类别的名称（每个也有categoryId字段），第二列有编辑按钮，第三个 - 删除按钮。

我想要有下一个功能：当用户点击编辑按钮在其行中带有类别名称的p元素需要被具有类别名称值的输入元素替换时，编辑和删除按钮也需要被替换与完成和取消按钮。单击“编辑”按钮即可更改该行。

得到了类别下一个模型：

export class Category { 
constructor(
    public categoryId: number, 
    public categoryName: string 
){} 
}

这里是组件文件的一部分：

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(); 
} 
...

来源

2017-05-05 Andrei Kazhanenka

请向我们展示您尝试的内容。 –

我想过将所有元素添加到DOM中，并且其中一些隐藏了ng样式。但不知道如何才能让按钮点击某些元素并更改样式以显示它们，然后获取一些元素来隐藏它们/ –

从简单的开始 - 使用静态数据获得一行效果 –

所以，这里是决定：起初我已经添加布尔属性“能见度“类别分类：

然后我添加了[隐藏] p roperties到模板的所有DOM元素，我需要按照编辑 - 取消按钮点击隐藏/显示。最初将这些属性的值设置为最初显示的元素的某个Category的可见性属性（true）的值，以及最初隐藏的元素的！visibility（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>

来源

2017-05-06 19:48:00

更改单击角2

回答

相关问题