我还在学习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个层？或者还有其他解决方案或想法吗？
非常感谢：）
更新代码，感谢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>
答案 0 :(得分：2)
我要做的是当你点击编辑其中一个层时，将层传入编辑功能。
然后将像angular.module('myPortfolio').service('ProjectService', function($http) {
var service = {
getAllProjects: function() {
return $http.get('data/projects.json', { cache: true }).then(function(resp) {
return resp.data;
});
},
getProject: function(id) {
function projectMatchesParam(project) {
return project.id === id;
}
return service.getAllProjects().then(function (projects) {
return projects.find(projectMatchesParam)
});
}
}
return service;
})
这样的变量设置为该层或与该层关联的某种类型的ID /名称。
然后，您可以将selectedTier与selectedTier中的等级相匹配。
然后隐藏所有选定的一个使用ngFor
答案 1 :(得分：0)
我会为该部分分配一个ID，并在每个部分中触发ID中的自己的editMode，而不是使用＆＃34;这个＆＃34;类描述符。
答案 2 :(得分：0)
首先，您实际上并不需要在this.onEdit()事件处理程序中调用this.clickSave()或(click)。只有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>