單擊按鈕後隱藏元素 - angular2 - ngFor

Question

我仍然在學習Angular2，目前我無法找到解決問題的方法。我使用ngFor顯示1-3層/包，比看起來像tiers in display mode。 當我點擊編輯按鈕後，我只想讓點擊元素進入編輯模式，目前所有人都切換到編輯模式，看起來像這樣tiers in edit mode。

以下是代碼，將其縮減爲相關部分。

<h1 class="page-title"><span class="fw-semi-bold">Packages</span></h1> 
<div class="row"> 
    <div class="col-md-4" *ngFor="let tier of tiers; let i=index;"> 
    <!-- Show Mode --> 
    <ul [hidden]="editMode" class="pricing-table"> 
     <li class="plan-name"> 
     {{ tier.title }} {{i}} 
     </li> 
     <li> 
     description 
     </li> 
     <li> 
     description 
     </li> 
     <li> 
     description 
     </li> 
     <li> 
     description 
     </li> 
     <p class="plan-price">{{ tier.price }}</p> 
     <li class="plan-action"> 
     <a class="btn btn-primary" (click)="this.onEdit()">Edit</a> 
     <a class="btn btn-success" (click)="this.clickSave()">SaveYes</a> 
     <a class="btn btn-warning" >Get</a> 
     </li> 
    </ul> 
    <!-- Edit Mode --> 
    <ul [hidden]="!editMode" class="pricing-table-edit"> 
     <li class="plan-name-edit"> 
     <input type="text" class="form-control" style=" font-size: 3rem;" placeholder="{{ tier.title }} " formControlName="package_name"> 

     </li> 
     <li > 
     <div class="rewards-edit" style="background-color: #3a3d46; ">Feature 1</div> 
     </li> 
     <li> 
     <div class="rewards-edit" style="background-color: #3a3d46">Feature 1</div> 
     </li> 
     <li> 
     <div class="rewards-edit" style="background-color: #3a3d46">Feature 1</div> 
     </li> 
     <li> 
     <div class="rewards-edit" style="background-color: #3a3d46">Feature 1</div> 
     </li> 
     <div style="align:center; padding-left: 40%; padding-right: 40%;"><input type="text" id="package_price1" class="form-control plan-price" placeholder="4,99" formControlName="package_price"></div> 

     <li class="plan-action"> 
     <a class="btn btn-primary">Edit</a> 
     <a class="btn btn-success">Save</a> 
     <a class="btn btn-warning">Publish</a> 
     </li> 
    </ul> 
    </div> 

組件，文件：

export class PackagesComponent { 
    editMode = false; 

    onEdit() { 
    this.editMode = true; 
    } 
} 

有沒有使用索引變量在我的方法的方式，讓我知道了3層的，目前點擊？或者還有其他解決方案或者想法嗎？

感謝很多:)

更新的代碼，這要歸功於阿布拉：

export class PackagesComponent { //this has to be renamed to TierComponent for less confusion 
    public tierToEdit: Tier; 
    editMode = false; 
    tiers: Tier[] = [ 
    new Tier(
     10, 
     'First Tier', 
     [ 
     {id: 500, title: 'desc', description: 'crazy description'}, 
     {id: 501, title: 'desc', description: 'crazy description'}, 
     {id: 502, title: 'desc', description: 'crazy description'}, 
     {id: 503, title: 'desc', description: 'crazy description'} 
     ], 
     5.00), 
     *[more code..]* 
    ] 


    constructor (private tierService: TierService) {} 

    ngOnInit() { 
    } 



    onEdit (tier: Tier) { 
    this.editMode = true; 
    this.tierToEdit = tier; 
    } 

模板的文件：

<h1 class="page-title"><span class="fw-semi-bold">Packages</span></h1> 
<div class="row"> 
    <div class="col-md-4" *ngFor="let tier of tiers; let i=index;"> 
    <!-- Show Mode --> 
    <ul *ngIf="!editMode || tierToEdit != tier" class="pricing-table"> 
     <li class="plan-name"> 
     {{ tier.title }} {{i}} 
     </li> 
    <li class="plan-name"> 
     {{ tier.title }} {{i}} 
     </li> 
     <li> 
     description 
     </li> 
     <li> 
     description 
     </li> 
     <li> 
     description 
     </li> 
     <li> 
     description 
     </li> 
     <p class="plan-price">{{ tier.price }}</p> 
     <li class="plan-action"> 
     <a class="btn btn-primary" (click)="onEdit(tier)">Edit</a> 
     <a class="btn btn-success" (click)="this.clickSave()">SaveYes</a> 
     <a class="btn btn-warning" >Get</a> 
     </li> 
    </ul> 
    <!-- Edit Mode --> 
    <ul *ngIf="editMode && tierToEdit == tier " class="pricing-table-edit"> 
     <li class="plan-name-edit"> 
     <input type="text" class="form-control" style=" font-size: 3rem;" placeholder="{{ tier.title }} " formControlName="package_name"> 

     </li> 
     <li > 
     <div class="rewards-edit" style="background-color: #3a3d46; ">Feature 1</div> 
     </li> 
     <li> 
     <div class="rewards-edit" style="background-color: #3a3d46">Feature 1</div> 
     </li> 
     <li> 
     <div class="rewards-edit" style="background-color: #3a3d46">Feature 1</div> 
     </li> 
     <li> 
     <div class="rewards-edit" style="background-color: #3a3d46">Feature 1</div> 
     </li> 
     <div style="align:center; padding-left: 40%; padding-right: 40%;"><input type="text" id="package_price1" class="form-control plan-price" placeholder="4,99" formControlName="package_price"></div> 

     <li class="plan-action"> 
     <a class="btn btn-primary">Edit</a> 
     <a class="btn btn-success">Save</a> 
     <a class="btn btn-warning">Publish</a> 
     </li> 
    </ul> 
    </div> 

Answer 1

首先，您實際上不需要在(click)事件處理程序中調用this.onEdit()或this.clickSave()。只有onEdit()或clickSave()可以正常工作。

請注意，您並未傳遞任何您想要進入編輯模式的單擊項的引用。所以，在這裏你可以通過像這樣的索引 - onEdit(i)或像這樣的對象 - onEdit(tier)。

在你PackagesComponent您可以設置被點擊一個成員變量的tier - 現在

export class PackagesComponent { 
    public packageToEdit:Package; // <------- new code 

    editMode = false; 

    onEdit (tier:Package) { 
    this.packageToEdit = tier; // <------- new code 
    this.editMode = true; 
    } 
} 

，在你的HTML代碼

<!-- Edit Mode --> 
<ul [hidden]="!editMode && packageToEdit==tier" class="pricing-table-edit"> 

    <li class="plan-name-edit"> 
    <input type="text" class="form-control" style=" font-size: 3rem;" placeholder="{{ tier.title }} " formControlName="package_name"> 

    </li> 
    <li > 
    <div class="rewards-edit" style="background-color: #3a3d46; ">Feature 1</div> 
    </li> 
    <li> 
    <div class="rewards-edit" style="background-color: #3a3d46">Feature 1</div> 
    </li> 
    <li> 
    <div class="rewards-edit" style="background-color: #3a3d46">Feature 1</div> 
    </li> 
    <li> 
    <div class="rewards-edit" style="background-color: #3a3d46">Feature 1</div> 
    </li> 
    <div style="align:center; padding-left: 40%; padding-right: 40%;"><input type="text" id="package_price1" class="form-control plan-price" placeholder="4,99" formControlName="package_price"></div> 

    <li class="plan-action"> 
    <a class="btn btn-primary">Edit</a> 
    <a class="btn btn-success">Save</a> 
    <a class="btn btn-warning">Publish</a> 
    </li> 
</ul> 

Answer 2

我會做什麼，當你點擊編輯是其中一層，將層傳入編輯功能。

然後設置一個像selectedTier這樣的變量，將其設置爲與該層關聯的某種排序或id /名稱。

然後，您可以將selectedTier與您的ngFor中的層相匹配。

然後隱藏所有，但選擇一個使用[hidden]="selectedTier != tier"

Answer 3

我的ID分配給部分，每個部分觸發ID，而不是使用「這個」類描述了自己的編輯模式。