Javascript 单击按钮后隐藏元素-angular2-ngFor

我仍在学习Angular2，目前无法找到解决问题的方法。我正在使用ngFor显示1-3层/包，看起来像这样。 单击编辑按钮后，我只希望单击的元素进入编辑模式，当前所有元素都切换到编辑模式，如下所示

下面是代码，将其简化为相关部分

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

有没有办法在我的方法中使用index变量，以便我知道当前单击了3层中的哪一层？或者有其他的解决方案或者想法吗

非常感谢：）

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

模板文件：

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

包


{{tier.title}{{i}


{{tier.title}{{i}


描述


描述


描述


描述

{{tier.price}

编辑
萨维耶斯
得到






特征1


特征1


特征1


特征1


编辑
拯救
发表

我要做的是，当您单击编辑其中一个层时，将该层传递到编辑功能中

然后设置一个变量，如

selectedTier

，将其设置为该层或与该层关联的某种id/名称

然后，您可以将所选的

层

与

ngFor

中的层相匹配

---

然后，为了隐藏除所选的一个之外的所有内容，请使用

[hidden]=“selectedTier！=tier”

我将为节分配一个ID，并在每个节中触发其自己的ID编辑模式，而不是使用“this”类描述符。

首先，您实际上不需要调用

this.onEdit（）

或

this.clickSave（）
（单击）
事件处理程序中的
。只有
onEdit（）
或
clickSave（）
可以正常工作

请注意，这里没有传递任何对要进入编辑模式的已单击项的引用。因此，这里您可以像这样传递索引-
onEdit（i）
，或者像这样传递对象-
onEdit（tier）

在您的
PackageComponent
中，您可以设置单击到成员变量的
层

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

  editMode = false;

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

导出类PackageComponent{
public packageToEdit:Package；//我不太明白第三部分和最后一部分，也不知道它是如何工作的：/hey Abrar，谢谢你的帮助，我添加了你的代码，希望能正确调整，也许你想看看它。但是它仍然不工作：/I加载页面时，它看起来像这样（），当我点击编辑按钮时，它看起来是这样的（），您能用
packageToEdit.id==tier.id
替换
packageToEdit==tier.id
吗？在显示编辑模式部分添加相反的逻辑条件，即
packageToEdit.id！=tier.id
export class PackagesComponent {
  public packageToEdit:Package;   // <------- new code

  editMode = false;

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

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