Ausblenden von Elementen nach dem Klicken auf eine Schaltfläche - angular2 - ngFor

Question

Ich lerne immer noch Angular2 und ich kann derzeit keine Lösung für mein Problem finden. Ich zeige 1-3 Tiers/Packages mit dem ngFor, was dann so aussieht tiers in display mode. Nachdem ich auf die Bearbeitungsschaltfläche geklickt habe, möchte ich nur, dass das angeklickte Element in den Bearbeitungsmodus wechselt. Momentan wechseln alle in den Bearbeitungsmodus, der so aussieht: tiers in edit mode.

Hier ist der Code, reduziert es auf die relevanten Teile.

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

Komponenten-Datei:

export class PackagesComponent { 
    editMode = false; 

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

Gibt es einen Weg, um den Index-Variable in meiner Methode zu verwenden, so dass ich, welche der drei Ebenen weiß derzeit angeklickt? Oder gibt es andere Lösungen oder Ideen?

Vielen Dank :)

AKTUALISIERT CODE dank Abrar:

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

Template-Datei:

<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

Zuerst müssen Sie nicht tatsächlich this.onEdit() oder this.clickSave() im (click) Event-Handler aufrufen. Nur onEdit() oder clickSave() wird funktionieren.

Beachten Sie, dass Sie keinen Verweis auf das angeklickte Element übergeben, das Sie in den Bearbeitungsmodus versetzen möchten. Also, hier können Sie entweder den Index wie folgt übergeben - onEdit(i) oder das Objekt wie folgt - onEdit(tier).

In Ihrem PackagesComponent Sie die tier festlegen können, auf eine Membervariable geklickt wird -

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

    editMode = false; 

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

nun in Ihrem HTML-Code

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

Was würde ich tun, ist, wenn Sie zu bearbeiten klicken, um einer der Ebenen, in der Ebene in die Bearbeitungsfunktion übergeben.

Setzen Sie dann eine Variable wie selectedTier auf die Ebene oder ID/Name einer Art, die dieser Ebene zugeordnet ist.

Dann können Sie diese selectedTier mit der Tier in Ihrem ngFor übereinstimmen.

Und dann für alle, aber die ausgewählte Anwendung [hidden]="selectedTier != tier"

Answer 3

verstecken würde ich eine ID zu dem Abschnitt zuweisen und in jedem Abschnitt eine eigene editMode in ID auslösen, anstatt den „diesen“ Klassendeskriptors zu verwenden.