更改單擊角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

回答

相關問題